【CSS小ネタ】画像サイズを変えずに拡大表示する。

WEBデザインで画像をホバーしたら画像がズームアップするような機能を実装しましたのでご紹介します。

【完成イメージ】

ポイントは画像サイズを変えることなくズームアップ表示できることです。

使用画像はトリミングしたのがこちらにあるので、そのまま使っていただいても構いません。

実装

まずHTMLを用意します。ポイントとしてimgタグをそのまま使うのではなく親要素で囲います。

html

<div class="img-frame">
  <img src="./img/image1.jpg" alt="サンプル画像">
</div>

そしてCSSです。今回は幅高さ300pxに固定します。

css

img{
  width: 300px;
  height: 300px;
}

ホバーアクションも書いていきましょう。今回は変形プロパティで拡大縮小表示ができる、transform: scale();を使用していきます。

css(imgの下に追加して下さい)

img:hover{
  /* transformは変形プロパティ。値にscaleを指定すると拡大縮小することができる。 */
  transform: scale(1.3);
}

これで画像をホバーした際に、画像が1.3倍で表示されるようになります。

みたまんまで、画像そのものが1.3倍になっています。流石にこのままの状態でWEBページに表示させるのはないですよね？なので、幅高さを固定して中の画像だけズームアップさせます。

そのためには、まず親要素に対して幅高さの固定値を設定し、子要素のはみ出た部分を非表示にする必要があります。図解化するとこんな感じです。

では実際に実装していきます。

css

.img-frame{
  /* 縦横300pxにがっちり固定 */
  width: 300px;
  height: 300px;
  /* 固定した幅からはみ出たものは隠してしまう */
  overflow: hidden;
}

動作を確認します。

どうでしょう？目的は果たせたかと思います。ただ動きがカクカクしてるのでちょっとダサいです。なのでtransition を追加しヌルッと動くようにします。それで【完成イメージ】通りの機能が実装できたかと思います。

css(完成形コード)

.img-frame{
  /* 縦横300pxにがっちり固定 */
  width: 300px;
  height: 300px;
  /* 固定した幅からはみ出たものは隠してしまう */
  overflow: hidden;
}
/* 画像スケール */
img{
  width: 300px;
  height: 300px;
  /* ヌルッと動くように */
  transition: 0.3s;
}
/* ボバー時のアクション */
img:hover{
  /* transformは変形プロパティ。値にscaleを指定すると拡大縮小することができる。 */
  transform: scale(1.3);
}

最後に今回やった実装を簡単に図解化したので添付しておきます。是非参考にして下さい。お疲れ様でした。