Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 26, 2019 at 9:06 pm #1131100
    studmuphin

    Hi team,

    First, the theme is amazing! I love it. How can I create a hover effect on an Image Element where it is black and white, and when hovered over it becomes color? Thanks again!

    August 26, 2019 at 9:30 pm #1131107
    Jordan Shannon

    Hey studmuphin,

    Refer to the following:

    https://kriesi.at/support/topic/black-white-effect/

    Best regards,
    Jordan Shannon

    October 1, 2019 at 8:42 pm #1143924
    studmuphin
    This reply has been marked as private.
    October 4, 2019 at 7:34 pm #1145052
    Victoria

    Hi studmuphin,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.avia_image {
     -webkit-filter: grayscale(100%); 
    filter: gray;
}
.avia_image:hover {
     -webkit-filter: grayscale(0%); 
    filter: gray;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 8, 2019 at 8:42 pm #1146272
    studmuphin
    This reply has been marked as private.
    October 9, 2019 at 8:01 am #1146404
    Rikard

    Hi,

    It’s working fine on my end on the page you linked to, could you try clearing your browser cache and reload the page or load it in an incognito window please?

    Best regards,
    Rikard

    January 31, 2020 at 9:21 pm #1180419
    studmuphin

    Sorry to ping this old thread again. The CSS Victoria provided works perfectly, with one notable exception. It doesn’t seem to effect the portfolio elements. Those images are still full color. Here’s a link. Thanks again!

    February 2, 2020 at 7:13 am #1180615
    Rikard

    Hi,

    Thank for the update, but it seems to work on the page in private?

    Best regards,
    Rikard

    February 2, 2020 at 3:18 pm #1180671
    studmuphin

    Hi! Thanks for the fast reply. It works perfectly inside each portfolio item. The portfolio grid on the homepage however, still shows in full color. Is there a way to make the portfolio grid appear black and white?

    February 2, 2020 at 6:27 pm #1180689
    Guenni007

    you always have to look for the right selector. On some portfolios ( f.e. Masonry Portfolio Grid ) these images are background-images and no avia-image

    but the transform on hover goes to the same selector:
    on many instances it looks nicer to have the hovered style colored so:

    .avia_desktop .av-masonry-entry .av-masonry-image-container {
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
}

.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

    PS : The best thing is to familiarize yourself with the development tools of each browser ( most of them have one ) to always find the right selectors. It is not that difficult. Point the mouse to the place you want to investigate, and then click on “investigate” or similar in the context menu (usually the right mouse button).

    February 3, 2020 at 12:28 pm #1180866
    Victoria

    Hi studmuphin,

    Did you get it working for you with Guenni007’s suggestion?

    Thanks, Guenni007 :)

    Best regards,
    Victoria

    February 3, 2020 at 5:05 pm #1180994
    studmuphin

    Thanks so much! You are all wonderful.

    February 3, 2020 at 9:26 pm #1181058
    Victoria

    Hi studmuphin,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Black and White Images’ is closed to new replies.