<ul class="demo-3">

    <li>

        <figure>

            <img src="//jegvirag.gportal.hu/portal/jegvirag/image/gallery/1458227680_35.jpg" alt=""/>

            <figcaption>

                <h2>J�gVir�g</h2>

                <p>Az oldal PORT�L�P�TÕ ami tartalmazza az al�bbi linkeket:DESIGN,SCRIPT,HTML k�d,Seg�ts�g.2005.04.12.-�n indult az oldal az�ta v�rom a seg�ts�gre szorul� G-port�los.Ha b�rmi �szrev�teled van irhatsz e-mailt [email protected] vagy irhatsz a vend�gk�nyvbe...

Vir�g</p>

            </figcaption>

        </figure>

    </li>

</ul>

<style>

.demo-3 {

    position:relative;

    width:300px;

    height:200px;

    overflow:hidden;

    float:left;

    margin-right:20px

}

.demo-3 figure {

    margin:0;

    padding:0;

    position:relative;

    cursor:pointer;

    margin-left:-50px

}

.demo-3 figure img {

    display:block;

    position:relative;

    z-index:10;

    margin:-15px 0

}

.demo-3 figure figcaption {

    display:block;

    position:absolute;

    z-index:5;

    -webkit-box-sizing:border-box;

    -moz-box-sizing:border-box;

    box-sizing:border-box

}

.demo-3 figure h2 {

    font-family:'Lato';

    color:#fff;

    font-size:20px;

    text-align:left

}

.demo-3 figure p {

    display:block;

    font-family:'Lato';

    font-size:12px;

    line-height:18px;

    margin:0;

    color:#fff;

    text-align:left

}

.demo-3 figure figcaption {

    top:0;

    left:0;

    width:100%;

    height:100%;

    padding:29px 44px;

    background-color:rgba(26,76,110,0.5);

    text-align:center;

    backface-visibility:hidden;

    -webkit-transform:rotateY(-180deg);

    -moz-transform:rotateY(-180deg);

    transform:rotateY(-180deg);

    -webkit-transition:all .5s;

    -moz-transition:all .5s;

    transition:all .5s

}

.demo-3 figure img {

    backface-visibility:hidden;

    -webkit-transition:all .5s;

    -moz-transition:all .5s;

    transition:all .5s

}

.demo-3 figure:hover img,figure.hover img {

    -webkit-transform:rotateY(180deg);

    -moz-transform:rotateY(180deg);

    transform:rotateY(180deg)

}

.demo-3 figure:hover figcaption,figure.hover figcaption {

    -webkit-transform:rotateY(0);

    -moz-transform:rotateY(0);

    transform:rotateY(0)

}

</style>