FadeIn images on hovering a certain class

[MoritzMoritz]

Hey,

i have a short question and i hope you guys maybe could help me out.
I´m working on a (laytheme-based) website and i want to have an effect simiular to this website where you hover (mouseover) over text (in my case i gave the text a certain class) and an image is faded in on a selected point and faded out after leaving the text. For sure its possible to get to this using javascript but when you take a look at this example you can see that also pure css should work.

In my case the code looks like that and i´m wondering why it´s not working:

.trigger {cursor:pointer;}
.trigger:hover .image{opacity:1.0;}

.image{
opacity: 0.0;
z-index:-100;
display: flex;
max-height:50vh;
width:auto;}

any Ideas? Thank you a lot!

[mariusjopen]

Hi @MoritzMoritz
I can quickly explain how I would do it:

1. List itemDisplay all the images with text next to it as projects
2. Give the images a class and hide them with display: none;
3. I would go for jquery to show and hide the images on hover. But I think the CSS way is also possible. So when you go for the CSS you make the images go display: block;on hover of the project.
4. Don't forget to position the image position: fixed;that it always stays in the same place.

This is already what you did somehow.

Can you show us an example of your tryout?

I know somewhere in this forum this topic came up. Maybe have a search for that as well.

All the best!

Marius