さぁ!検索しよう!

HTML+CSSで、マウスオーバーすると中の画像が拡大するサムネイルを作る方法です。

DEMO

サムネイルをマウスオーバーすると中の画像だけがゆっくりと拡大されます。

HTML

<div>
  <img src="http://tsukulog.net/wp-content/uploads/2015/06/https-www.pakutaso.com-assets_c-2015-05-YOTA82_mushimegane15114606-thumb-1000xauto-14187.jpg">
</div>

ポイント

HTMLは、親要素の<div></div>とimg要素のみです。

CSS

div {
  border: 6px dotted #ddd;
  margin: 0 auto;
  overflow: hidden;
  width: 300px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  transition: 0.5s;
}

img:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
}

ポイント

サムネイルの縁であるdivには、中の画像が拡大されたときに隠れるのを防ぐために、overflow:hidden;を指定しています。

div {
  border: 6px dotted #ddd;
  margin: 0 auto;
  overflow: hidden;
  width: 300px;
}

画像には、transition:0.5s;を指定することで、拡大されるときの時間的変化を加えています。

img {
  display: block;
  height: auto;
  max-width: 100%;
  transition: 0.5s;
}

画像がマウスオーバーされると、transform: scale(2);によって画像のみが拡大されます。scale()に指定する数値は、大きいほど拡大率が上がります。

img:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
}

以上で、HTML+CSSでマウスオーバーすると中の画像が拡大するサムネイルの作り方を終わります。