Данный код сделан под три блока, но вы можете сделать хоть под один 
Как вы видите что данные блоки исполнены на одном css без js
Код
<ul id="workman">
<li>
<img src="ссылка на картинку" alt="заголовок фильма">
<div class="workmaninfo">
<h3>Название фильма</h3>
<p>Краткое описание фильма</p>
<a href="#" title="">Подробнее</a>
</div>
</li>
<li>
<img src="ссылка на картинку" alt="заголовок фильма">
<div class="workmaninfo">
<h3>Название фильма</h3>
<p>Краткое описание фильма</p>
<a href="#" title="">Подробнее</a>
</div>
</li>
<li>
<img src="ссылка на картинку" alt="заголовок фильма">
<div class="workmaninfo">
<h3>Название фильма</h3>
<p>Краткое описание фильма</p>
<a href="#" title="">Подробнее</a>
</div>
</li>
</ul>
Код
#workman{list-style:none;margin:100px 0;height:550px}
#workman li{display:inline;float:left;-webkit-perspective:500;-webkit-transform-style:preserve-3d;-webkit-transition-property:perspective;-webkit-transition-duration:.5s}
#workman li:hover{-webkit-perspective:5000}
#workman li img{border:10px solid #fcfafa;-webkit-transform:rotateY(30deg);-moz-box-shadow:0 3px 10px #888;-webkit-box-shadow:0 3px 10px #888;-webkit-transition-property:transform;-webkit-transition-duration:.5s}
#workman li:hover img{-webkit-transform:rotateY(0deg)}
.workmaninfo{border:10px solid #fcfafa;padding:20px;width:200px;height:180px;background-color:#deddcd;margin:-195px 0 0 55px;position:absolute;-moz-box-shadow:0 20px 40px #888;-webkit-box-shadow:0 20px 40px #888;-webkit-transform:translateZ(30px) rotateY(30deg);-webkit-transition-property:transform,box-shadow,margin;-webkit-transition-duration:.5s}
#workman li:hover .workmaninfo{-webkit-transform:rotateY(0deg);-webkit-box-shadow:0 5px 10px #888;margin:-175px 0 0 30px}
.workmaninfo h3{color:#7a3f3a;font-variant:small-caps;font-family:Georgia,serif,Times;text-align:center;padding-bottom:15px}
.workmaninfo p{padding-bottom:15px}
.workmaninfo a{background-color:#7a3f3a;padding:5px 10px;color:#eee;text-decoration:none;display:block;width:80px;text-align:center;margin:0 auto;-moz-border-radius:5px;-webkit-border-radius:5px}
.workmaninfo a:hover,.workmaninfo a:focus{background-color:#6a191f;color:#fff}
У каждого имеется желание просмотреть как работает то что я сюда выдаю, так вот вам ссылочка
Адаптацию конечно же не настраивал, надеюсь что все , здеся знают как работать с такими стилями как - @media (max-width:...){...} Но тот кто знает, может и сам настроить, кто не знает, или просто лень матушка одалевает, то пишите.
