I am currently trying to replicate a function of the Netflix homepage:
We have several rows of movies. When we don't mouseover any movie, the movie images stay normal. But when we hover over a movie, the current image scales up and all the other ones in this row to get their opacity reduced. When we "onMouseOut" the row, everything gets back to normal
I am currently wondering how to implement that into an onMouseOver function. If anyone has an idea, that'd very helpful.
PS: I also use Swiper JS.
Thank you for your help.
The solution could be to add a class to that element during the onMouseOver event. This way you can easily select what elements you would like to stylize.
You could also add a class name to the container so that you could select all elements without selected class or without a hover. Please try the one below, it seems to be the simplest:
.container:hover > .item:not(:hover) {
opacity: 0.5;
}
Please see the codepen below: