悬停时的图像效果，图像的归档位置

【问题标题】：Image effect on hover, filing place of image悬停时的图像效果，图像的归档位置
【发布时间】：2016-03-05 14:31:12
【问题描述】：

我在这个演示站点中找到了一个效果（http://www.templatemonster.com/demo/51283.html 在图像上的菜单子站点中），我想在我的网页上使用类似的东西，但我不知道如何做这个“魔术”。也许有人知道只能用 css 编写还是我必须使用 JS/jquery？

【问题讨论】：

标签： image hover effect

【解决方案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>

【讨论】：

是的，就是这样。非常感谢：D