フォトギャラリーなどで、並んでいるサムネイルの一つにマウスオーバーしたときに、何らかの反応があると操作にリズムが出てくるというか、選んでいるという実感がわいてくるというものである。ここで紹介するのは、マウスオーバーでサムネイルが若干拡大したり、縮小したりする反応を transition で実現するもの三種である。
表示用のサムネイル写真のオリジナルサイズは、ここでは、250*141pix で、表示枠のサイズは、150*85pix となっている。
（１）枠内拡大効果
（２）枠内縮小効果
（３）拡大効果
サンプル表示用HTML（三種に共通）
<div id="hv"> <div class="frame"><img src="http://wintheme.echo.jp/wp-images/hirosimajo/s1.jpg" alt="" /></div> <div class="frame"><img src="http://wintheme.echo.jp/wp-images/hirosimajo/s2.jpg" alt="" /></div> <div class="frame"><img src="http://wintheme.echo.jp/wp-images/hirosimajo/s3.jpg" alt="" /></div> <div class="frame"><img src="http://wintheme.echo.jp/wp-images/hirosimajo/s4.jpg" alt="" /></div> </div> |
ここで、src 以降のアドレスは、画像がアップロードされているアドレスを記載する。
サンプル表示用 CSS
（１）枠内拡大効果
.frame { width: 150px; height: 85px; float: left; margin-right: 5px; overflow: hidden;}.frame img { max-width:200% !important; width: 150px; height: 85px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}.frame img:hover { width: 250px; height: 141px; margin-top: -28px; margin-left: -50px;} |
（２）枠内縮小効果
.frame { width: 150px; height: 85px; float: left; margin-right: 5px; overflow: hidden;}.frame img { max-width:200% !important; width: 250px; height: 141px; margin-top: -28px; margin-left: -50px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}.frame img:hover { width: 150px; height: 85px; margin-top: 0; margin-left: 0;} |
（３）拡大効果
.frame img { width: 150px; height: 85px; border: 0; float: left; margin-right: 5px; transition: all ease 0.3s; -webkit-transition: all ease 0.3s;}#hv:hover div img { width: 116px;}#hv:hover > div:hover img { width: 250px; height: 140px; margin-top: -56px;} |
