@keyframes ABig{0%{transform: scale(0);}100%{transform: scale(1);}} .grid{ overflow: hidden; margin: 0 auto; width:100%; list-style: none; text-align: center; font-size:0; display:none; height:990px; } .grid .imgPro{ height:320px;} /* Common style */ .grid div { position: relative; z-index: 1; display: inline-block; overflow: hidden; /* width: 590px; height: 300px;*/ background: #3085a3; text-align: center; cursor: pointer; margin:0 10px 0 0; overflow:hidden; animation:ABig 1s; } /*.grid div img { position: relative; display: block; min-height:100%; opacity: 1.0; margin:0 auto; }*/ .grid div span { padding:15px; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid div span::before,.grid div span::after {pointer-events: none;} .grid div span,.grid div a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Anchor will cover the whole item by default */ /* For some effects it will show as a button */ .grid div a {} .grid div h2 { } .grid div h2 span {} .grid div h2,.grid div p {} .grid div p { margin:-10px; padding:0; font-size:14px; padding:0 0 0 0} /* Individual effects */ div.effect-oscar { background:#000; margin-bottom:10px;} div.effect-oscar img {opacity: 1.0;} div.effect-oscar span {} div.effect-oscar span::before { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; border: 1px solid #fff; content: ''; } div.effect-oscar h2 { opacity: 0; margin: 50px 0 0 0; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } div.effect-oscar h2 img{ width:190px;} div.effect-oscar span::before, div.effect-oscar p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0); transform: scale(0); } div.effect-oscar:hover h2 { opacity:1.0; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } div.effect-oscar:hover span::before, div.effect-oscar:hover p { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } div.effect-oscar:hover span {} div.effect-oscar:hover img { opacity: 0.4; } span img{opacity: 1.0!important;} .grid i{ display:block; background:url(../images/icoMore.png) center no-repeat; width:100%; height:24px; margin-top:25px} div.effect-oscar i{ opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0); transform: scale(0); } div.effect-oscar:hover i { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }