この方法は非常にシンプルな方法で、画像をホバーした際に画像のサイズをひと回り大きくする、という手法です。
ポイントは「li」に複数のクラス名を付けて、それぞれにスタイルシートを記述しなければいけないので、考え方はシンプルですが記述方法は少し煩雑になってしまいます。
最新バージョンの主要ブラウザーであればベンダープレフィックスは不要ですが、その都度確認し、必要であれば付け加えましょう。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>レスポンシブ対応サイト制作</title> <style> @charset "utf-8"; /* CSS Document */ body,p,h1,h2,h3,h4,h5,ul,li,a,em,dl,img,em{ padding:0; margin:0; text-decoration:none; } body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; background: #000; } ul { list-style-type:none; } img { vertical-align:bottom } .inner { width:950px; margin:20px auto 0; overflow: hidden; padding-left: 10px; background: #FFF; } ul.contents-list li{ float:left; margin:9px; } .size-2x2 { width:357px; height:357px; overflow: hidden; } .zoom-2x2 img { width: 357px; height: 357px; transition: all 0.5s ease; } .zoom-2x2 img:hover { width: 400px; height: 400px; } .size-2x1 { width:357px; height:170px; overflow: hidden; } .zoom-2x1 img { width: 357px; height: 170px; transition: all 0.5s ease; } .zoom-2x1 img:hover { width: 400px; height: 190px; } .size-1x1 { width:170px; height:170px; overflow: hidden; } .zoom-1x1 img { width: 170px; height: 170px; transition: all 0.3s ease; } .zoom-1x1 img:hover { width: 190px; height: 190px; } </style> </head> <body> <div id="container"> <div class="inner"> <ul class="contents-list"> <li class="size-2x2 zoom-2x2"><a href="#"><img src="img/01-l.png" alt="#"></a></li> <li class="size-2x1 zoom-2x1"><a href="#"><img src="img/02-m.png" alt="#"></a></li> <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/03-s.png" alt="#"></a></li> <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/04-s.png" alt="#"></a></li> <li class="size-2x1 zoom-2x1"><a href="#"><img src="img/05-m.png" alt="#"></a></li> <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/06-s.png" alt="#"></a></li> <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/07-s.png" alt="#"></a></li> <li class="size-2x1 zoom-2x1"><a href="#"><img src="img/08-m.png" alt="#"></a></li> <li class="size-1x1 zoom-1x1"><a href="#"><img src="img/09-s.png" alt="#"></a></li> </ul> </div> </div> <!--/container--> </body> </html>