<div> <ul> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> <li><a href="#"><img src="http://placehold.it/100x100"></a></li> </ul> </div>
body { background: #eee; } div { max-width: 600px; margin: 0 auto; } ul { margin: 0; padding: 0; list-style-type: none; } li img { float: left; margin: 10px; border: 5px solid #fff; width: 100px; height: 100px; -webkit-transition: box-shadow 0.5s ease; -moz-transition: box-shadow 0.5s ease; -o-transition: box-shadow 0.5s ease; -ms-transition: box-shadow 0.5s ease; transition: box-shadow 0.5s ease; } li img:hover { -webkit-box-shadow: 0px 0px 7px rgba(0,0,0,0.7); box-shadow: 0px 0px 7px rgba(0,0,0,0.7); }