Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 26, 2016 at 9:13 pm #590009
    Mathuseo

    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

    February 29, 2016 at 4:54 pm #590916
    Yigit

    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

    March 1, 2016 at 8:53 am #591408
    Mathuseo

    That works fine Yigit! :) Thank you!

    March 1, 2016 at 5:00 pm #591668
    Yigit

    Hi!

    You are welcome, glad we could help :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Change image with mousehover at Partner/Logo Element’ is closed to new replies.