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

 

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;

}

 

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

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

<figcaption>     szöveged helye       </figcaption>

</figure>

</center>