<style>
figure.figurefx{
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden; /* hide overflowing elements by default */
}
figure.figurefx::before, figure.figurefx::after{ /* create :before and :after pseudo elements that are initially positioned outside canvas */
content: '';
width: 100%;
height: 100%;
display: block;
background: black;
position: absolute;
opacity: 0.3;
top: 0;
left 0;
-moz-transform: translate3d(0, -100%, 0); /* position elements past bottom of layout */
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
figure.figurefx img{
display: block;
}
figure.figurefx figcaption{
position: absolute;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
background: white;
padding: 5px;
z-index: 100;
width: 100%;
max-height: 100%;
overflow: hidden;
top: 50%;
left: 0;
-moz-transform: translate3d(-100%, -50%, 0); /* position caption outside layout horizontally and centered vertically */
-webkit-transform: translate3d(-100%, -50%, 0);
transform: translate3d(-100%, -50%, 0);
opacity: 0;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
figure.figurefx figcaption a{
text-decoration: none;
}
/*** Default slide down panel effect ****/
figure.default:hover::before{
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.default:hover figcaption{
opacity: 1;
-moz-transform: translate3d(0, -50%, 0); /* center caption */
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
figure.pushup img{
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
figure.pushup figcaption{
top: 100%;
opacity: 1;
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.pushup:hover img{
-moz-transform: translate3d(0, -20px, 0); /* move image up vertically a bit for parallax effect */
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
figure.pushup:hover figcaption{
-moz-transform: translate3d(0, -100%, 0); /* move caption up vertically to fully reveal caption */
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
</style>
<style>
/* IE9 and below specific CSS */
figure.figurefx::before, figure.figurefx::after{
display: none; /* hide pseudo elements, since legacy IE can't transition them */
}
<![endif]-->
</style>
<figure class="figurefx pushup">
<img src="http://www.mooseloose.com/screenshot.png" alt="An awesome picture">
<figcaption>More Great Free Scripts More Great Free Scripts More Great Free Scripts More Great Free Scripts More Great Free Scripts </figcaption>
</figure>