<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body{ background-color: #cccccc; background: url(img/triangles.png) repeat; } .container{ width: 805px; height: 320px; overflow: hidden; margin: 100px auto; -webkit-box-shadow: 0 0 5px #000; } .container li{ width:160px; display: block; position: relative; float: left; border-left: 1px solid #888; -webkit-box-shadow: 0 0 25px #000; -webkit-transition: all 0.5s; } .container ul:hover li {width: 40px;} .container ul li:hover {width: 640px;} .container li img { display: block; } .image_title { background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; bottom: 0; width: 640px; } .image_title a { display: block; color: #fff; text-decoration: none; padding: 20px; font-size: 16px; } </style> </head> <body> <div class="container"> <ul> <li> <div class="image_title"> <a href="#">KungFu Panda</a> </div> <a href="#"> <img src="img/img1.jpg"> </a> </li> <li> <div class="image_title"> <a href="#">Toy Story 2</a> </div> <a href="#"> <img src="img/img2.jpg"> </a> </li> <li> <div class="image_title"> <a href="#">Wall-E</a> </div> <a href="#"> <img src="img/img3.jpg"> </a> </li> <li> <div class="image_title"> <a href="#">Up</a> </div> <a href="#"> <img src="img/img4.jpg"> </a> </li> <li> <div class="image_title"> <a href="#">Cars 2</a> </div> <a href="#"> <img src="img/img5.jpg"> </a> </li> </ul> </div> </body></html>