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.

Oh thats strange i see it. Should be right underneath

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

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.