Greyscale on gallery Grid

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #12616


    Hi everyone !

    I’d like to know if there is a way using a CSS Code to have a greyscale effect on my gallery and to show the images with the colors when hover.

    I have this CSS code right now but it’s actually not working (works but the color effect when hover only last if the mouse doesn’t move)

    .grid-gallery-photos img {
    filter: grayscale(80%);
    -webkit-filter: grayscale(80%);
    -moz-filter: grayscale(80%);
    -o-filter: grayscale(80%);
    filter: gray
    -webkit-transition: all 0s ease;
    transition: all 0s ease;
    -moz-transition: all 0s ease;
    -o-transition: all 0s ease;;


    .grid-gallery-photos img:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;


    Any suggestions ?
    Thanks !


    Hi @adrien.andrealcaraz

    Please provide the page link with example of this effect.
    Thus I will be able to help you.



    My bad !


    Hi @adrien.andrealcaraz

    You can try to enable Shadow option at the Main Settings tab of your Gallery.
    Then turn on “Overlay image with shadow” and choose the “Shadow color” you need.
    Also, don’t forget to save changes.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Thanks so much! Please Enter Your Info Below To Get PRO Discount and Gifts