.container {
        position: relative;
        width: 50%;
        cursor:pointer;
    }

    .image {
        opacity: 1;
        display: block;        
        transition: .5s ease;
        backface-visibility: hidden;
        border:1px solid #cdcbcb;
        width:200px;
        height:135px;
    }

    .middle {
        transition: .5s ease;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%)
    }

    .container:hover .image {
        opacity: 0.3;
    }

    .container:hover .middle {
        opacity: 1;
    }

    .text {
        background-color: #0095d9;
        color: white;
        font-size: 16px;
        padding: 16px 32px;
    }