【CSS】拡大表示するイメージギャラリー

CSSだけを使って、サムネイル写真が拡大したり、回転したりといったインタラクションのあるシンプルなイメージギャラリーを作成する方法を紹介します。

サムネイル画像を配置する

まずは、ギャラリーとして載せたい分だけ画像を配置していきます。

//HTML
<ul class="gallery">
  <li class="photo1"><img src="photo1.jpg" /></li>
  <li class="photo2"><img src="photo2.jpg" /></li>
  ～中略～
  <li class="photo6"><img src="photo6.jpg" /></li>
</ul>

//CSS
.gallery li {
  float: left;
  position: relative;
  width: 270px;
  margin: 0 20px 40px 0;
  border: 10px solid #fff;
  background: #fff;
  box-shadow: 5px 5px 5px #222;
  z-index: 1;
  box-sizing: border-box;
}

見た目は何でも構いませんが、とりあえずポラロイド風に白枠を付けたり、影を入れたりしてみました。

レイアウトに変化をつける

サムネイルを並べたら、お好みで写真の角度を変えたりしてみるのも良いでしょう。その場合は、transformプロパティを使って各画像ごとに変化をつけます。

.gallery .photo1 {
  transform: rotate(-5deg);
}
.gallery .photo2 {
  transform: rotate(3deg);
}
～中略～
.gallery .photo6 {
  transform: rotate(5deg);
}

このように、transformプロパティでrotate()を指定することで、要素に角度をつけることができます。単位は「deg」を用いて、マイナスの値を指定すると反時計回りに回転します。

インタラクティブにする

今度は、マウスオーバーしたときに、写真が拡大したり回転したりするちょっとしたアニメーションをつけてインタラクティブにしていきます。

.gallery li:hover {
  z-index: 10;
  transform: scale(1.5) rotate(0deg);
}

transformプロパティの「scale()」を使うことで、要素を拡大縮小することができます。ここでは、1.5倍に拡大する指定をしています。そして、「rotate(0deg)」でそれぞれの画像の角度を0度に戻しています。z-indexプロパティは、画像が拡大した際に隣接する画像よりも上に重なるようにするために指定しておきます。あとは、元のli要素に以下を追加します。

.gallery li {
  transform: scale(1.0);
  transition: all 0.3s ease-out;
}

transformプロパティで通常の画像倍率を指定し、transitionプロパティでどのようにアニメーションさせるか指定します。ここでは、「ease-out」を使って最初は早く、最後はゆっくり動くようにしています。そして、それを0.3秒かけて動かします。

• DEMO

以上が、CSSだけでインタラクションのあるシンプルなイメージギャラリーを作る方法となります。