Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 15, 2014 at 3:46 pm #279118
    silviouk

    Hi there,

    I would like to assign to all images placed via the image holder (advanced layout) to appear in black and white site side, and on hover become colour, is this possible?

    Thanks in advance. Silvio

    June 16, 2014 at 6:00 pm #279597
    Yigit

    Hi silviouk!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #main img { filter: grayscale(100%);
    -webkit-filter: grayscale(100%); 
    filter: gray;
    -webkit-transition: all .6s ease; }

#main img:hover {    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none; }
.image-overlay { display: none !important; }

    Best regards,
    Yigit

    June 16, 2014 at 10:12 pm #279708
    silviouk

    Hey, thanks. This only seemed to work on Opera. I tried all other browsers, emptied caches etc, but no joy. Any ideas?

    June 16, 2014 at 10:23 pm #279715
    Yigit

    Hi!

    Can you post the link to your website? I tried it on my local installation and it does work fine for me

    Best regards,
    Yigit

    June 17, 2014 at 11:48 am #279936
    silviouk
    This reply has been marked as private.
    June 17, 2014 at 1:37 pm #279978
    Ismael

    Hey!

    Thank you for using the theme!

    Please add this on Quick CSS or custom.css instead:

    div.avia-image-container div a img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

div.avia-image-container:hover div a img {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}

    Regards,
    Ismael

    June 17, 2014 at 3:37 pm #280054
    silviouk
    This reply has been marked as private.
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘IMAGE HOVER – BLACK AND WHITE TO COLOUR’ is closed to new replies.