<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:#B2C27B;

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;

}

 

/*** 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 flipreveal">

<img src="  képed URL címe   " alt="Köszöntelek a JégVirág design----"> 

<figcaption>   szöveged helye   </figcaption>

</figure></center>