The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript hover fading

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #32091

    I’m going on a whim here,

    but im looking for a little jquery that would allow one image to fade into another when hovered over and then stick as the new image.

    To explain a little I have a section of my website based on glasses/specs and want an image to be initially blurred and when hovered over it would come into focus. i’ve got the images designed etc. just wondered if it was possible with a little JS?


    Most certainly – you’d also be able to do it with some of the new CSS3 functions (with somewhat limited browser support, but workable enough fall backs).


    Absolutely possible! You could go about doing this a number of ways depending on the exact effect you’re aiming for.

    You could stack two images with CSS, and fade out the top image on hover with jQuery.

    Here’s a demo:


    One way to do that would be to use this:

    $(document).ready(function() {
    $(".image-container").hover(function() {
    }, function() {

    The two immediate ways that come to mind are:

    1. Create a timer, and measure the length of the hover against the timer
    2. Use a neat jQuery plugin called hoverIntent.

    The first 2 answers to this question on StackOverflow do a good job offering solutions:

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.