Question

我在这个演示网站上找到了一个效果（图片中的hower上的子网站中http://www.templatemonster.com/demo/51283.html），我想在我的网页上使用类似的东西，但我不知道怎么做这个“魔术” 。也许有人知道可以只用css写，或者我必须使用JS / jquery？

Answer 1

.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
}

<div class="itemsContainer">
    <div class="image"> <a href="#">  <img src="http://cbs.umn.edu/sites/cbs.umn.edu/files/public/african_lion_king-wide_1.jpg" style="height:100px" /> </a></div>
    <div class="play"><img src="http://cdn1.iconfinder.com/data/icons/flavour/button_play_blue.png" /> </div>
</div>

图像对悬停，图像归档的影响

1 个答案: