<center><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:#ffffff;

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;

}

 

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

}

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

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

<figcaption>szöveg helye</figcaption>

</figure></center>