Show hover play icon

Question

Purpose: when I find the "item" image, I want the "play" image to appear in the center of the "div" of the div image. I have done the following:

play.img overrides itemImage.img

HTML:

<div class="itemsContainer"> <img src="/images/G1.jpg"/> <div class="playy"> <img src="/images/playy.png"/> </div> </div> <div class="itemsContainer"> <img src="/images/B1.jpg"/> <div class="playy"> <img src="/images/playy.png"/> </div> </div> <div class="clear"> 

CSS

 .itemsContainer { float: left; width : 300px; height : 300px; margin-left : 2px; } .itemsContainer img { width : 300px; height : 175px; margin-bottom : -115px; z-index : -1; } .play img { position : relative; width : 50px; height : 50px; z-index : 100; margin : 0 0 50px 125px; opacity : 0.0 ; } .itemsContainer img:hover { opacity : 0.8; } 

With the above code, the “play” image only appears when I am on div.play, instead I want the “play” image to appear when I hover over .itemContainer.img

How can I create a "play" image by hovering over itemImage.img ??

Link: http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css

for some reason I don’t want to use the “a” tag, and I also wanted to know what I am doing wrong?

 http://jsfiddle.net/e6Lav/5/ -- Problem http://jsfiddle.net/2uJKR/11/ -- Solution 

Answer 1

try it

HTML

 <div class="itemsContainer"> <div class="image"> <a href="#"> <img src="#" /> </a></div> <div class="play"><img src="#" /> </div> </div> 

CSS

 .itemsContainer { background:red; float:left; position:relative } .itemsContainer:hover .play{display:block} .play{ position : absolute; display:none; top:20%; width:40px; margin:0 auto; left:0px; right:0px; z-index:100 } 

Demo

Answer 2

CSS is a great bot; this HTML code might be better

<div class="itemsContainer"> <a href=""><img src=""/></a> <div class="play"> <a href=""><img src="" /></a> </div> </div>

This will also help the play button :)