Updating code for hover from classic to Fluid Engine

Password: Mannafilm21

Hi there,

I'm moving an existing site to Fluid Engine and cannot figure out how to transfer this hover effect on multiple images (see image 1);

To target all of them before, I used this code;

//Hovereffekt på film-billeder
@media only screen and (min-width: 660px) {
.design-layout-poster:hover .image-card-wrapper {
  visability: hidden;
  opacity: 0;
  transition-duration: .5s;
}

.design-layout-poster .image-card-wrapper {
  visability: visible;
  opacity: 1;
  background-color: hsla(317, 0%, 32%, 0.55);
}
  }
 

But now that I'm building it as separate image blocks, I don't know how to target them?

Thanks a lot! 

Can you share your page link? It wasn't added to the public part of the post 🙂

Thank you so much! 

https://www.mannafilm.dk/film-copy

You might consider recreating the section with the Classic Editor. To transfer that code to Fluid Engine, it will need a lot of code.

If you still want to use FE, first you need to combine 2 Text Blocks to 1 Text, then we can target it easier

(Currently text in screenshot is in 2 Text Blocks, you need to change it to 1. Do similar for other images)

Next make sure the height of the text block = the height of the image block.
Then let me know, we can adjust the code

(You can do it for first image/text first, if the code works, you can do it for all then)