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

Question

我在这个演示网站（http://www.templatemonster.com/demo/51283.html 在 MENU 子网站上的图片上找到了一个效果）我想在我的网页上使用类似的东西，但我不知道如何做到这一点 "magic"。也许有人知道只能用 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>

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

Image effect on hover, filing place of image

image

hover

effect