.grid_portfolio { position: relative; clear: both; margin: 0; padding: 0; list-style: none; text-align: center; } /* Common style */ .grid_portfolio figure { position: relative; float: left; overflow: hidden; margin: 0px; height: auto; /* background: #3085a3;*/ text-align: center; cursor: pointer; padding:0px } .grid_portfolio figure img { position: relative; display: block; /* min-height: 100%; */ max-width: 100%; /* opacity: 0.9;*/ } .grid_portfolio figure figcaption { color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid_portfolio figure figcaption::before, .grid_portfolio figure figcaption::after { pointer-events: none; } .grid_portfolio figure figcaption, .grid_portfolio figure figcaption > 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_portfolio figure figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; opacity: 0; } .grid_portfolio figure h2 { word-spacing: -0.15em; font-weight: 300; } .grid_portfolio figure h2 span { font-weight: 800; } .grid_portfolio figure h2, .grid_portfolio figure p { margin: 0; } .grid_portfolio figure p { letter-spacing: 1px; font-size: 68.5%; } /*-----------------*/ /***** Goliath *****/ /*-----------------*/ figure.effect-goliath img, figure.effect-goliath h2 { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } figure.effect-goliath img { -webkit-backface-visibility: hidden; backface-visibility: hidden; } figure.effect-goliath h2, figure.effect-goliath p { position: absolute; bottom: 0; left: 0; padding: 10px; color:#fff; font-size:22px; text-align:center; } .grid_portfolio .fa{ color:#fff; font-size:22px; margin:6px; vertical-align:middle; float:right; } figure.effect-goliath p { text-transform: none; font-size: 15px; color:#fff; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,50px,0); transform: translate3d(0,50px,0); width: 100%; text-align: left; text-transform:uppercase; } figure.effect-goliath:hover img { -webkit-transform: translate3d(0,-50px,0); transform: translate3d(0,-50px,0); } figure.effect-goliath:hover h2 { -webkit-transform: translate3d(0,-70px,0); transform: translate3d(0,-70px,0); } figure.effect-goliath:hover p { opacity: 1; -webkit-transform: translate3d(0,5px,0); transform: translate3d(0,5px,0); }