montrer icône de lecture sur l'image hover

Objectif: Quand j'ai passez la souris sur "poste" de l'image, je veux un "jeu" image à afficher dans le centre de "l'élément" image div. Je n'ai suivantes:

jouer.img chevauche 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;
}

Avec le code ci-dessus, la "lecture" de l'image n'apparaît que lorsque j'ai passez la souris sur les div.jouer à la place je veux que la "lecture" de l'image à afficher lorsque je hover sur .itemContainer.img

Comment puis-je faire "jouer" de l'image apparaît en passant la souris sur itemImage.img??

Référence: http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css

pour une raison que je ne veux pas utiliser "un" tag et je voulais aussi savoir ce que je fais de mal?

http://jsfiddle.net/e6Lav/5/  -- Problem
http://jsfiddle.net/2uJKR/11/ -- Solution
post rendu html
vous pouvez utiliser le curseur de la propriété de css

OriginalL'auteur gaurav jain | 2013-02-15

  1. 17

    Essayer cette

    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
}

    DÉMO

    pour une réponse rapide. U peut résoudre ce problème pour moi w/o de grands changements....jsfiddle.net/e6Lav/5 juste demander
    ok je l'ai corrigé. merci beaucoup jsfiddle.net/2uJKR/11
    Cool

    OriginalL'auteur Sowmya

  2. 0

    Le CSS est bien ce bot HTML peut-être mieux

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

    Cela aidera le bouton de lecture pour être un lien aussi 🙂

    Bette à utiliser l'icône de lecture comme toile de fond et fermer </a> après la div.

    OriginalL'auteur user3443284