Forums

> I was thinking about something like this http://codepen.io/chrisburton/pen/olwIk but there’s an issue on hover. It cuts in an out when you move your mouse around the thumbnails.

Simply fix the z-index on .play:hover. Problem solved.

Whole code:

div { position: relative; }

.movie {
position: relative;
z-index: 1;

&:hover {
z-index: -1;
}
}

.play {
position: absolute;
left: 0;

&:hover {
z-index: 1;
}
}

@Jaseon I updated the pen to @HugoGiraudel’s fix (thank you). The reason it might not have worked is because he is using SASS.

http://codepen.io/chrisburton/pen/olwIk

> The reason it might not have worked is because he is using SASS.

Sorry. Habits.

and here is a simplified version if you want: http://codepen.io/chrisburton/pen/Bioea

add a class of `movie` to the movie thumbnails and a class of `play` for the hover “play trailer” thumbnail is the way I’d do it.

Since I don’t know your markup structure, I can’t really say. Perhaps someone else could lend a hand.

I believe you could also use jQuery to add a class of `.play` (or append some html) to the image on hover. That isn’t my area though.