<style>
/*** Default shared CSS ****/
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;
}
/*** Dual panels slide up and down effect 2 ****/
figure.dualpanels2::before{
-moz-transform: translate3d(-100%, 0, 0); /* position :before pseudo element past left edge of layout initially */
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
figure.dualpanels2::after{
-moz-transform: translate3d(100%, 0, 0); /* position :after pseudo element past right edge of layout initially */
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
figure.dualpanels2:hover::before{
-moz-transform: translate3d(-50%, 0, 0);
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
figure.dualpanels2:hover::after{
-moz-transform: translate3d(50%, 0, 0);
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
figure.dualpanels2:hover figcaption{
opacity: 1;
-moz-transform: translate3d(0, -50%, 0);
-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;
}
</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 dualpanels2">
<img src="http://www.mooseloose.com/screenshot.png" alt="An awesome picture">
<figcaption>More Great Free Scripts <a href="http://mooseloose.com">A link</a></figcaption>
</figure>