Image grayscale to color animation

  • cuddymg

    (@cuddymg)


    6 years, 4 months ago

    Hey everybody,

    I’m looking for a simple way to make my images automatically fade from grayscale to full color. I have seen methods for doing this with mouse hover but I can’t find anything that will do it automatically.

    Any help would be greatly appreciated.

    • This topic was modified 6 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not a Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • stirrell42

    (@stirrell42)

    6 years, 4 months ago

    I think a possible way to accomplish this automatically would be to use the example you found for on hover and modify it. The hover method most likely has CSS like:

    `
    img {
    // Grayscale styles go here
    }

    img:hover {
    // Color styles go here
    }
    `

    Instead of hover, you could add a class. So something like:

    `
    img.color {
    // Color styles go here
    }
    `

    Then, you could use jQuery to add the class to your image. Something like:

    `
    $(function() {
    $(img).addClass(‘color’);
    });
    `

    This would add the color class to every single image on the page. In your case, you could perhaps target the gallery images on your homepage like:

    `
    $(‘.et_pb_image img’).addClass(‘color’);
    `

    This would add the color class to the img tag when the document loads and make the transition automatically. I think :-). Hope this helps.

    Scott

    baranwal

    (@baranwal)

    6 years, 4 months ago

    You can use below JS code that first shows all images to grayscale for 3s and after that, it fills color in all the images.

    You can try this code to your browser console to your page http://auriehallart.com/

    (function(){
    jQuery('img').css('filter', 'grayscale(100%)');
    setTimeout(function(){
        jQuery('img').css('filter', 'none');
    }, 3000); // change this time according to your need, currently it is 3s.
})();
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Image grayscale to color animation’ is closed to new replies.