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

```