1. HOT Add more varieties for your Divi header (12 premade styles): https://header.diviultimate.com/
NEW Divi Block - Online drag & drop tool to easily mix & match 320+ premade Divi blocks (light / dark version), including custom header, fullscreen / slide in mobile menu, footer, etc. We also added NEW special module designs, such as Before & After Image Slider, Masonry Gallery, Promo Bar, Logo Carousel, etc.Try Free Version

Solved Create Grayscale Filter on Mouse Hover Sitewide

Discussion in 'Free Divi Community Forum' started by Shirisha Bhatnagar, Jul 14, 2021.

  1. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

    Hi Guys,

    I want to create black and white to color filter (grayscale filter) on mouse hover on sitewide images, be it product images or photo galleries. How can I achieve this effect?

    Currently I am using this code:

    /* Default Overlay Color */
    .et_overlay {
    background: rgba(0, 0, 0, 0.15) !important;
    }

    Another code I found to create grayscale effect is:

    .grayscale .et_pb_gallery_image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .8;
    }

    How can I apply both the codes together to change the color from black and white to color on mouse hover?
    Or is there any other to create this effect?

    Thanks
    Shirisha
     
    1. AD Set awesome default design for your Divi single blog page:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Take this for example:

    .grayscale .et_pb_gallery_image {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: .8;
    }

    To make it back to original on hover, add this:

    .grayscale .et_pb_gallery_image:hover {
    -webkit-filter: none!important;
    filter: none!important;
    opacity: 1!important;
    }
     
  3. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

    1. AD Subtle image hover effects for Divi sites. Comes with 250+ amazing designs that fill up your day to day needs:Learn More
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    For image module, it would be something like this to apply it sitewide:
    Code:
    .et_pb_image {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: .8;
    }
    .et_pb_image:hover {
        -webkit-filter: none!important;
        filter: none!important;
        opacity: 1!important;
    }
     
  5. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

    Hi,

    Thanks for response. But it is still not working. I am looking for the effect on the products as well as images. For example - https://rajatbookcorner.com/book-category/book-review/ on this page. Right now there is a default divi setting where on hover on any of product images on page the background converts to white color and back to original color after hover.

    But I am looking for grayscale effect on hover and to original color after hover.
     
    1. AD A versatile multipurpose plugin with lots of modules to design & customize different aspects of the Divi theme:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    What about the below CSS for the product page:
    Code:
    .product .et_overlay {
        display: none!important;
    }
    .product:hover img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: .8;
    }
     
  7. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

    Hi,

    Thanks a lot. It's working like a charm now. :)
     
    1. AD Bring color & gradient overlays to your parallax & video backgrounds in Divi:Learn More
  8. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    If you want the hover effect only when hovering the image, then change this:

    .product:hover img {

    into:

    .product img:hover {
     
    1. AD Create interactive popups / overlays for videos, images & more with different trigger types in Divi:Learn More
  10. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

    Hi,

    Thanks a lot. Working perfectly. :)
     
  11. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

    Hi Guys,

    Sorry the issue still persists.

    Though the product images have turned to grayscale on hover, images effect has been reversed on hover - https://rajatbookcorner.com
    I want to have the same effect as on product pages on all media images.

    Thanks
     
    1. AD Subtle image hover effects for Divi sites. Comes with 250+ amazing designs that fill up your day to day needs:Learn More
  12. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

  13. Divi.Help

    Divi.Help Administrator
    Staff Member

    For this previous CSS:
    Code:
    .et_pb_image {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        opacity: .8;
    }
    .et_pb_image:hover {
        -webkit-filter: none!important;
        filter: none!important;
        opacity: 1!important;
    }
    Replace it with:
    Code:
    .et_pb_image:hover {
        -webkit-filter: grayscale(100%)!important;
        filter: grayscale(100%)!important;
        opacity: .8!important;
    }
    Try the below CSS:
    Code:
    .product img, .et_pb_image {
        transition: all 0.5s ease;
    }
     
    1. AD Set awesome default design for your Divi single blog page:Learn More
  14. Shirisha Bhatnagar

    Shirisha Bhatnagar New Member

    Hi,

    Thanks a lot. This is perfect. :)