在图像上显示播放图标。

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

玩了。img 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

在上面的代码中，“play”图像只出现在我的鼠标悬停的时候，而我想要在鼠标悬停的时候出现“play”图像。

How can I make "play" image appear by hovering on itemImage.img??

如何让“play”图像通过鼠标悬停在itemImage.img上出现?

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

参考: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?

出于某种原因，我不想使用“a”标签，我还想知道我做错了什么?

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

2 个解决方案

#1

Try this

试试这个

HTML

HTML

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

CSS

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

演示

#2

The CSS is fine bot this HTML might be better

CSS很好，这个HTML可能更好

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

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

This will help the play button to be a link too :)

这将有助于播放按钮也成为一个链接:)

#1