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

    hi again…

    i´ve another question.

    i like the masonry hover effect, but i would like to modify them a little bit.
    is it possible, and if yes – how can i change the hover if i would like to let the zoom effect as it is, but starts with an black/white and fade to color effect?

    i tryed to use the following code, but without any result :(

    .av-masonry-image-container img { filter: grayscale(100%);
        -webkit-filter: grayscale(100%); 
    	-moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray; /* IE 6-9 */
        -webkit-transition: all .6s ease; 
     }
    .av-masonry-image-container img:hover { filter: grayscale(0%);
        -webkit-filter: none;
        -moz-filter: none;
        -ms-filter: none;
        filter: none;
    }

    maybe you can help me.

    thanks
    ——————-
    acm

    • This topic was modified 9 years, 2 months ago by ACM.
    #386063

    Hey ACM!

    Thank you for using Enfold.

    Try this on Quick CSS:

    .av-masonry-image-container { 
    	filter: grayscale(100%);
        -webkit-filter: grayscale(100%); 
    	-moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray; /* IE 6-9 */
        -webkit-transition: all .6s ease; 
     }
    .av-masonry-image-container:hover { 
    	filter: grayscale(0%);
        -webkit-filter: none;
        -moz-filter: none;
        -ms-filter: none;
        filter: none;
    }

    Best regards,
    Ismael

    #386114

    hi ismael,

    thanks for our answer – that works fine.
    but the only problem ist that the image looks a bit week in its color. is there any setting like “brightness() contrast() opacity()” in the original effect?

    2. question:
    can i overlay the image with black with opacity and hover them to color?

    best regards
    acm

    #386855

    Hey!

    The code should not affect the image quality. Edit the masonry element then deactivate the Image overlay effect.

    Best regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.