CSS: Transition

by Alberto Naperi Jr.

HTML

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="pic"/>
    </div>
</div>

CSS

.thumbnail {
    width: 100%;
    height: 100%;
    position: relative;
}

.image {
    width: 100%;
    height: 100%;
}

.image img {
    position: absolute;
    left: 0;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

.image:hover img {
    top: 6%;
    left: 6%;
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}