Image hover effets on board?

[Innoplex_Beuke]

Hello, I saw an effect on a website where the picture changes when you move the mouse over it. Here ist the website to see, what I mean:
https://www.bauder.de/de/bauder-deutschland.html

5 persons are shown. When I move the mouse over one of them, the text turns white and the background turns orange. Is there something like that in the Enfold theme? Where can I find it?

I look forward to your response.
Best regards
Andreas

[Guenni007]

yes f.e. if you got a masonry-gallery element – you can decide to show title and excerpt allways.
so you can style on hovering the images the other elements – but here it is only title and excerpt.
( This is site-specific for my test-page only) : https://webers-testseite.de/gallery/

#top.page-id-34956 .av-masonry-entry:hover .av-masonry-image-container {
  filter: hue-rotate(180deg);
}
#top.page-id-34956  .av-masonry-entry:hover .av-inner-masonry-content.site-background {
  background-color: orange;
}
#top.page-id-34956  .av-masonry-entry:hover .av-inner-masonry-content-pos * {
  color: #000;
}

i will see if it is possible with image-alb element

[Guenni007]

if you layout Image Elements in columns ( on my test page there are 4 1/4 columns with image elements in it)
the images have custom captions and the caption is shown allways.
( Again this is site-specific – maybe a class on one of the surrounding containers would be better)

#top.page-id-34956 .av-image-caption-overlay-position {
  height: 50%;
  background-color: rgba(0,0,0,0.4);
  top: 50%;
}
#top.page-id-34956 .av-caption-image-overlay-bg {
  opacity: 0 !important;
}
#top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position,
#top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position p,
#top.page-id-34956 .main_color .avia-image-container a .av-image-caption-overlay-position p strong,
#top.page-id-34956 .main_color .avia-image-container a img {
  transition: all 0.5s ease;
  color: #FFF
}
#top.page-id-34956 .main_color .avia-image-container a img {
    filter: grayscale(0.8);
}
#top.page-id-34956 .main_color .avia-image-container a:hover img {
    filter: grayscale(0);
}
#top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position {
  background-color: orange;
}
#top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position p,
#top.page-id-34956 .main_color .avia-image-container a:hover .av-image-caption-overlay-position p strong {
  color: #000;
}

[Yigit]

Hi,

Please refer to @Guenni007 post above.

@Guenni007 thanks as always :)

Best regards,
Yigit

[Author]

Posts