"

From 2014.igem.org

.grid {

margin: 0 auto; list-style: none; text-align: center; }

.grid figure { max-width: 410px; position: relative; }

.grid figure img { max-width: 100%; display: block; position: relative; width:210px; }

.grid figcaption { position: absolute; top: 0; left: 0;

background: #2c3f52; color: #ed4e6e; }

.grid figcaption h3 { margin: 0; padding: 0; color: #fff; text-transform: uppercase; }

/* Caption Style 4 */

.cs-style-4 figure { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }

.cs-style-4 figure > div { overflow: hidden; }

.cs-style-4 figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; }

.no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img { -webkit-transform: translateX(35%); -moz-transform: translateX(35%); -ms-transform: translateX(35%); transform: translateX(35%); }

.cs-style-4 figcaption { height: 100%; width: 65%; opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate3d(0,-90,0,0deg); -moz-transform: rotate3d(0,-90,0,0deg); transform: rotate3d(0,-90,0,0deg); -webkit-transition: -webkit-transform 1s, opacity 0.1s 0.2s; -moz-transition: -moz-transform 1s, opacity 0.1s 0.2s; transition: transform 1s, opacity 0.1s 0.2s; }

.no-touch .cs-style-4 figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.7s, opacity 0.1s; -moz-transition: -moz-transform 0.7s, opacity 0.1s; transition: transform 0.7s, opacity 0.1s; }