При наведении на изображение

HTML

<ul class="demo-1 effect">

    <li>

        <h2>This is a cool title!</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>

    </li>

    <li><img class="top" src="images/image1.jpg" alt=""/></li>

</ul>




CSS




.demo-1 {

    position:relative;

    width:300px;

    height:200px;

    overflow:hidden;

    float:left;

    margin-right:20px;

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

}

.demo-1 p,.demo-1 h2 {

    color:#fff;

    padding:10px;

    left:-20px;

    top:20px;

    position:relative

}

.demo-1 p {

    font-family:'Lato';

    font-size:12px;

    line-height:18px;

    margin:0

}

.demo-1 h2 {

    font-family:'Lato';

    font-size:20px;

    line-height:24px;

    margin:0;

}

.effect img {

    position:absolute;

    margin:-15px 0;

    right:0;

    top:0;

    cursor:pointer;

    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;

    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;

    -o-transition:top .4s ease-in-out,right .4s ease-in-out;

    transition:top .4s ease-in-out,right .4s ease-in-out

}

.effect img.top:hover {

    top:-230px;

    right:-330px;

    padding-bottom:200px;

    padding-left:300px

}




• Пейзажи!

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.

•