<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;
}
/*** 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;
}
/*** Dual panels slide up and down effect ****/
figure.dualpanels::after{
-moz-transform: translate3d(0, 100%, 0); /* position :after pseudo element at bottom of layout initially */
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
figure.dualpanels:hover::before{
-moz-transform: translate3d(0, -50%, 0);
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
figure.dualpanels:hover::after{
-moz-transform: translate3d(0, 50%, 0);
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
}
figure.dualpanels: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;
}
/*** 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;
}
/*** Push Up effect ****/
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;
}
/*** Open Reveal effect ****/
figure.openreveal{
overflow: visible;
perspective: 2000px;
}
figure.openreveal::before, figure.openreveal::after{
display: none;
}
figure.openreveal img{
position: relative;
z-index: 100;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
figure.openreveal figcaption{
z-index: 99;
opacity: 1;
-moz-transform: translate3d(0, -50%, 0); /* center caption */
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
}
figure.openreveal:hover img{
-moz-transform: rotateX(180deg); /* rotate image to reveal caption underneath */
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*** flipreveal Reveal effect ****/
figure.flipreveal{
overflow: visible;
perspective: 900px;
}
figure.flipreveal::before, figure.flipreveal::after{
display: none;
}
figure.flipreveal img{
position: relative;
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: 100;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.flipreveal figcaption{
opacity: 1;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
-moz-transform: rotateX(180deg) translate3d(0,0,0);
-webkit-transform: rotateX(180deg) translate3d(0,0,0);
transform: rotateX(180deg) translate3d(0,0,0);
}
figure.flipreveal:hover img{
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
figure.flipreveal:hover figcaption{
-moz-transform: rotateX(360deg) translate3d(0,0,0);
-webkit-transform: rotateX(360deg) translate3d(0,0,0);
transform: rotateX(360deg) translate3d(0,0,0);
}
</style>
<!--[if lte IE 9]>
<style>
/* IE9 and below specific CSS */
figure.figurefx::before, figure.figurefx::after{
display: none; /* hide pseudo elements, since legacy IE can't transition them */
}
</style>
<![endif]-->
<figure class="figurefx default">
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg">A link</a></figcaption>
</figure>
<figure class="figurefx dualpanels">
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg">A link</a></figcaption>
</figure>
<figure class="figurefx dualpanels2">
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg">A link</a></figcaption>
</figure>
<figure class="figurefx pushup">
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg">A link</a></figcaption>
</figure>
<figure class="figurefx openreveal">
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg">A link</a></figcaption>
</figure>
<figure class="figurefx flipreveal">
<img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg" alt="An awesome picture">
<figcaption>An awesome picture caption! <a href="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458254056_15.jpg">A link</a></figcaption>
</figure>