Skip to main content
Code Review

Return to Answer

added explanation
Source Link
Ted
Ted
  • 306
  • 1
  • 4

I feel I should point out that this can be done purely with CSS. ThisAlong with removing the need for javascript, this also has the benefit of fixing that "one minor defect".

Here's some explanation of what is going on here.

In the CSS, the lines about transition (with and without browser prefixes), handle the transition of the default image to the hover image, giving it the fade effect.

To have this happen smoothly on the first time they're hovered, I've added the hover images to the dom to pre-load them so that they will already be loaded and cached in the elements with the .imgpl class on them. These are hidden with CSS--they only serve to load the hover images. doing this is optional, but I feel it gives a better user experience. Without it, the browser has to load the image the first time it is hovered, which leads to a delay in the display.

The default image is defined as the background image,

.img1{background:url("http://www.placehold.it/350x150") no-repeat;}

And the hover images are defined with the :hover pseudo class:

.img1:hover{background:url("http://www.placehold.it/351x151")no-repeat;}

Run the snippet below to see it work:.

I feel I should point out that this can be done purely with CSS. This also has the benefit of fixing that "one minor defect". Run the snippet to see it work:

I feel I should point out that this can be done purely with CSS. Along with removing the need for javascript, this also has the benefit of fixing that "one minor defect".

Here's some explanation of what is going on here.

In the CSS, the lines about transition (with and without browser prefixes), handle the transition of the default image to the hover image, giving it the fade effect.

To have this happen smoothly on the first time they're hovered, I've added the hover images to the dom to pre-load them so that they will already be loaded and cached in the elements with the .imgpl class on them. These are hidden with CSS--they only serve to load the hover images. doing this is optional, but I feel it gives a better user experience. Without it, the browser has to load the image the first time it is hovered, which leads to a delay in the display.

The default image is defined as the background image,

.img1{background:url("http://www.placehold.it/350x150") no-repeat;}

And the hover images are defined with the :hover pseudo class:

.img1:hover{background:url("http://www.placehold.it/351x151")no-repeat;}

Run the snippet below to see it work.

Source Link
Ted
Ted
  • 306
  • 1
  • 4

I feel I should point out that this can be done purely with CSS. This also has the benefit of fixing that "one minor defect". Run the snippet to see it work:

.img{
    -webkit-transition: background 500ms ease-in-out;
    -moz-transition: background 500ms ease-in-out;
    -ms-transition: background 500ms ease-in-out;
    -o-transition: background 500ms ease-in-out;
    transition: background 500ms ease-in-out;
    width:350px;
    height:150px;
    overflow:hidden;/*just for the demo sake*/
}
/* these are just placeholders to preload the images */
.imgpl{
    display:none;
}

.img1{
    background:url("http://www.placehold.it/350x150") no-repeat;
}
.img1:hover, .img1.imgpl{
    background:url("http://www.placehold.it/351x151") no-repeat;
}
.img2{
    background:url("http://www.placehold.it/352x152") no-repeat;
}
.img2:hover, .img2.imgpl{
    background:url("http://www.placehold.it/353x153") no-repeat;
}
.img3{
    background:url("http://www.placehold.it/354x154") no-repeat;
}
.img3:hover, .img3.imgpl{
    background:url("http://www.placehold.it/355x155") no-repeat;
}
.img4{
    background:url("http://www.placehold.it/356x156") no-repeat;
}
.img4:hover, .img4.imgpl{
    background:url("http://www.placehold.it/357x157") no-repeat;
}
<div id="main-wrapper">
    <div class="img img1"></div>
    <div class="img img2"></div>
    <div class="img img3"></div>
    <div class="img img4"></div>
</div>

<!-- these are optional for pre-loading the hover images, they don't display -->
<div class="img1 imgpl"></div>
<div class="img2 imgpl"></div>
<div class="img3 imgpl"></div>
<div class="img4 imgpl"></div>