.container
      {
         /*width: 100%;
        height: auto;
        border: 1px solid #eee;*/
        overflow: hidden;
        position: relative;
        float: left;
        display: inline-block;
        cursor: pointer;
      }
.child
     {
        /*height: 100%;
        width: 100%;*/
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -o-transition: all .8s ease;
        transition: all .8s ease;
	  	transform-origin: 50% 65%;
  	    transition: transform 5s, filter 3s ease-in-out;
  	    filter: brightness(150%);
      }
.container:hover .child,.container:focus .child 
      {
        -ms-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
      }
.container:hover .child:before,.container:focus .child:before { display: block;}
.container:hover span, .container:focus span { display: block;}
.child:before
    {
        content: "";
        display: none;
        height: 100%;
        width: 100%;
        position: absolute;
		filter: brightness(100%);
  	    transform: scale(3);
    }

@media screen and (max-width: 960px)
    {
        .container
        {
          width: 100%;
          margin: 20px 0;
        }
        .wrapper { padding: 20px;}
     }