title: show play icon on image hover
body: <p>Goal: When I hover on "item" image, I want a "play" image to appear in center of "item" image div. I did following:</p>
  
  <p>play.img overlaps itemImage.img </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="itemsContainer"&gt;
    &lt;img src="/images/G1.jpg"/&gt;
    &lt;div class="playy"&gt;
      &lt;img src="/images/playy.png"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="itemsContainer"&gt;
    &lt;img src="/images/B1.jpg"/&gt;
    &lt;div class="playy"&gt;
      &lt;img src="/images/playy.png"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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 </p>
  
  <p>How can I make "play" image appear by hovering on itemImage.img??</p>
  
  <p>Reference: <a href="http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css" rel="noreferrer">http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css</a></p>
  
  <p>for some reason I do not want to use "a" tag and I also wanted to know what I am doing wrong?</p>
  
  <pre><code>http://jsfiddle.net/e6Lav/5/   -- Problem
  http://jsfiddle.net/2uJKR/11/  -- Solution
  </code></pre>