transition

makes a transition over an image

by luissanchezm86

HTML

<div id="demo-5" class="demobox">
    <img src="http://dinolatoga.com/demo/webkit-image-hover-effects/optimusprime.jpg" />
    <div class="details">
         <h3>Transformers</h3>

        <p>More than meets the eye</p>
    </div>
</div>

CSS

#demo-5 {
    position:relative;
    width: 200px;
}
#demo-5 .details {
    opacity: .9;
    position:absolute;
    top:0;
    left:0;
    margin-left:-200px;
    -webkit-transition: margin-left;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-duration: 250ms;
}
#demo-5:hover .details {
    margin-left:0;
}
.details {
    width: 200px;
    height: 300px;
    background: #000;
    color: #fff;
    text-align: center;
}