Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1221598

    Hey Team Enfold,
    looking for a soulution having images black-and-white and colorful on mouse-over.
    Wasn’t there a default setting?!
    Thank you for your help :)


    Hey ThomSchu,

    Add this to quick css:

    #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,
    Jordan Shannon


    Hey Jordan,
    sorry. Didn’t work :/
    Link attached…


    Hi Tom,

    Well, the original images have to have color, I saw only black and white images on the front page.

    Best regards,


    on masonry or on image alb element?
    On Masonry there is an option on advanced tab – image effect: greyscale effect.

    On images as Victoria has already said : they have to be uploaded and inserted as colored images first – then they were set to grayscale by css.
    if you do not want to have it on all images ( see jordans css with #main as first selector ) – i would give a custom class like: gray-to-color to the image element – then this to quick css:

    .avia-image-container.gray-to-color img {
              -webkit-filter: grayscale(1);
                      filter: grayscale(1);
    .avia-image-container.gray-to-color img:hover {
      -webkit-filter: none !important ;
              filter: none !important ;

    and yes – if you got a link on them – remove the overlay :

    .gray-to-color .image-overlay {
        display: none !important;
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.