Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 12, 2018 at 3:46 pm #1008985
    Asrada

    My question concerns the image-element with the globe:
    I want to make use of CSS3-Filter-effects: image should displayed in grayscale (this works) and when hovering in colours (this doesnot work).

    This element should work like the one with the lightbulbs (but there I use 2 images, which is not very fine – but if there is only this possibility:
    how can I preload images used in mouseover?).

    I also would like to use this effekt with the content slider below this section.

    September 13, 2018 at 8:23 am #1009266
    Dude

    Hey Asrada,

    I added this code to the quick css field:

    
#top .avia-image-container:hover, #top .avia-image-container img:hover, #top .slide-entry .slide-image:hover  {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.5s ease;
}

#top .avia-image-container, #top .avia-image-container img, #top .slide-entry .slide-image{
  -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}

#top a:hover .image-overlay .image-overlay-inside, #top a:hover .image-overlay {
display: none !important;
}

    as a starting point. It changes the effect of the content slider and “MIT DAMPF FÜR KLIMA UND UNTERNEHMEN” image.

    Best regards,
    Peter

    September 15, 2018 at 12:54 pm #1010106
    Asrada

    Hello Peter,
    thank you!
    Yes, for slider it works fine.

    But the image with the globe cannot hover without hovering the text.
    I want – at the beginning – the image to be in grayscale and the text (MIT DAMPD…) in colours (this works).
    And when hovering the image should be in colours.

    I changed your code (in my childtheme), but I am not able to adress in CSS only just the image. Can you please have a look?
    Thank you, best regarde
    Astrid

    CSS is now:
    /* #top .avia-image-container:hover,*/ #top .avia-image-container img:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
    transition: all 0.5s ease;
    }

    /*#top .avia-image-container,*/ #top .avia-image-container img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);

    }

    September 15, 2018 at 1:06 pm #1010108
    Dude

    Hi!

    I added this code to the quick css field:

    
#top #wrap_all .avia-image-container:hover img {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
filter: grayscale(0%);
transition: all 0.5s ease;
}

#top #wrap_all .avia-image-container img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

    and now it should work as you described above :)

    Regards,
    Peter

    September 17, 2018 at 3:36 pm #1010811
    Asrada

    Yes, that’s it – thank you!

    September 17, 2018 at 6:12 pm #1010886
    Victoria

    Hi Asrada,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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