フォトギャラリーなどで、並んでいるサムネイルの一つにマウスオーバーしたときに、何らかの反応があると操作にリズムが出てくるというか、選んでいるという実感がわいてくるというものである。ここで紹介するのは、マウスオーバーでサムネイルが若干拡大したり、縮小したりする反応を 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;
}