Hover Pictures like a24

Hey guys,
first of all merry christmas everyone. I am trying to build a little website with my movie and music recomendations and would love to build in a hover effect, as you can find it at the bottom of this website Films | A24.

When you hover over the movielist on the right side appears a picture while hovering over each movie.

Do you know if there is any tutorial explaining anything simliar to this? I am a beginner so i need step by step explanations. And those tutorial vids are a great help, but couldnt find something to this topic. Maybe someone can help me?


Here is my public share link: LINK
(how to access public share link)

Hey @Michuh, I guess @timothy1643 has made a video on this topic please do watch it.

Youtube Link

Motion Hover Effect clone and study this similar to the one you’ve asked but more delightful😁

All the best :peace_symbol:

1 Like

Thats perfect, thank you so much!

Hallo @Sachin or Anybody reading this. I played now the last two days with this effect and already made some progress. Thank your for your help.

It start working right now but i really dont know how to solve the following problem.

https://diebarcantona.webflow.io/michuh/movies

I just want to have the appearing picture on the same level as the to it belonging text. On the right, next to it. Right now its always on the top right corner. Actually again like at the a24 website. Films | A24

I mean, I could create for every text individually a hover effect, but now its very helpful, that it adapts to the whole class which means less work.

Is it a minor change or do I have to start all over again? As i said, i am totally new. Therefore this is just a testwebsite, just to learn the effect. I also insert here now the read-only link, but for some reason it shows directly all the picture initially. For some reason there is a mistake.

https://preview.webflow.com/preview/diebarcantona?utm_medium=preview_link&utm_source=designer&utm_content=diebarcantona&preview=a532d3576d97d2995a28fba4ed54ec68&pageId=5f9403a899671b3ac9a0b635&mode=preview

Anybody an Idea? Greetings to everybody!