Fade Image On Hover

by Paul Leech

HTML

<div class="hover-img">
    <img width="200%"...

CSS

.hover-img {
    position: relative;
    width: 200px;
    height: 200px;
}
.hover-img > img {
    position: absolute;
    left: 0; top: 0;
    width: 300%; height: 130%;
}

.hover-img > .img2 {
    opacity: 0;
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}
.hover-img:hover > .img2 {
    opacity: 1;
}