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

    Hi,

    I use the “Partner/Logo Element”. There are 8 pictures in black and white. When the mouse hover the image the image should change to the colored version of the logo.

    What not works is: .avia-logo-element-container.avia-content-slider1 .slide-loop-1: { background-image: url(“…”); } because the image in Partner/Logo Element is not a background image of the DIV-container. It is a -Tag. So how can I change the image with hover effect to a colored version?

    Regards,
    Mathuseo

    #590916

    Hey Marcel!

    Please upload your images in color and then add following code to Quick CSS in Enfold theme options under General Styling tab

    #top .avia-logo-element-container img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: gray;
        -webkit-transition: all .6s ease;
        transition: all .6s ease;
        -moz-transition: all .6s ease;
        -o-transition: all .6s ease;
    }
    #top .avia-logo-element-container img:hover {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        -moz-filter: grayscale(0%);
        -o-filter: grayscale(0%);
        filter: none;
    }

    Cheers!
    Yigit

    #591408

    That works fine Yigit! :) Thank you!

    #591668

    Hi!

    You are welcome, glad we could help :)

    Regards,
    Yigit

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Change image with mousehover at Partner/Logo Element’ is closed to new replies.