
マウスオーバーで表示範囲を固定したまま写真を拡大する
2015年7月23日CSSテクニック
サムネイルにマウスを乗せた時、そのサムネイルに使っている写真が表示範囲をはみ出さずにズームする表現です。
HTML
<ul id="photo"> <li><a href="javascript:void(0);"><img src="img01.jpg" width="237" height="156" /></a></li> <li><a href="javascript:void(0);"><img src="img02.jpg" width="237" height="156" /></a></li> <li><a href="javascript:void(0);"><img src="img03.jpg" width="237" height="156" /></a></li> </ul>
CSS
#photo { max-width: 800px; margin: 0 auto; text-align: center; } #photo li { display: inline-block; margin: 0 10px 10px; width: 30%; } #photo li a { display: block; width: 100%; height: auto; overflow: hidden; } #photo img { width: 100%; height: auto; transition: .3s ease-in-out; } #photo a:hover img { transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); }