Эффект изображения при наведении, место размещения изображения

Question

Я нашел один эффект на этом демонстрационном сайте (http://www.templatemonster.com/demo/51283.html в подменю MENU на hower on image), и я хочу использовать что-то подобное на моей веб-странице, но я не знаю, как сделайте это «волшебство». Может быть, кто-то знает, что можно писать только в 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>