<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;

}

 

 

/*** 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;

}

 </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 pushup">

<img src="képed URL címe" alt="An awesome picture"> 

<figcaption>szöveged helye</figcaption>

</figure>