Image Hover

[Jaseon]

So im trying to make a Image hover, something like Netflix really.
You hover and a Player Button with Opacity shows.

http://jsfiddle.net/LkEzc/

Explains what im after, sadly dunno how to do this still a newbie to css would appreciate some help alot.

[chrisburton]

You can set the opacity by using the opacity property.

http://jsfiddle.net/LkEzc/1/

[Jaseon]

Thanks Chris, but not really what i was looking for.
I want the “Player Trailer Image” to appear on top of the other image on hover.

[chrisburton]

Update the URL to the photo. I don’t see the “Play Trailer Image”.

[Jaseon]

Oh thats strange i see it.
Should be right underneath

URL: http://i.imgur.com/6fHv5ZC.png

[chrisburton]

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.

[Kitty Giraudel]

> 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]

Thank you so much for taking time guys, still cant get it working tho hmm.
Dunno if i accidentally edited the Codepen link and somehow it saved.

Mind sending me a new link @Chrisburton

[chrisburton]

@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

[Jaseon]

You saved me, thank you so much !
I really really really appreciate that.

[Kitty Giraudel]

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

Sorry. Habits.

[Jaseon]

One question, if i want to add it to multiple images what do i edit/add
Just instead of making several new .play and .movie codes, what could be a solution.

[chrisburton]

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.

[Jaseon]

Oh i get it now. alright yet again thank you @chrisburton
[Solved]

[chrisburton]

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.

[Author]

Posts