[英]show play icon on image hover
Goal: When I hover on "item" image, I want a "play" image to appear in center of "item" image div. 目标:当我将鼠标悬停在“项目”图像上时,我希望“播放”图像显示在“项目”图像div的中心。 I did following:
我做了以下事情:
play.img overlaps itemImage.img play.img重叠itemImage.img
HTML: 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 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 使用上面的代码,只有当我将鼠标悬停在div.play上时才会出现“播放”图像,而我希望当我将鼠标悬停在.itemContainer.img上时出现“播放”图像
How can I make "play" image appear by hovering on itemImage.img?? 如何通过将鼠标悬停在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
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
}
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>
This will help the play button to be a link too :) 这将有助于播放按钮成为链接:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.