show play icon on image hover

css, html

Solution

Try this

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

Problem

Goal: When I hover on "item" image, I want a "play" image to appear in center of "item" image div. I did following: play.img overlaps 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 code above, the "play" image appears only when I hover on div.play instead I want the "play" image to appear when I hover on .itemContainer.img How can I make "play" image appear by hovering on itemImage.img?? Reference: http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css for some reason I do not want to use "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 ```

Original source