CSS 画像のホバー効果のズーム、回転、スライド.

共通の HTML/CSS

基本的に、一部の HTML および CSS コードは、幅、高さ、マージン、パディングなど、すべてのホバー効果で実際には同じです.

//HTML
<figure>
  <img src="image.jpg">
</figure>

//CSS
figure {
  width: 300px;
  height: 200px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

1.ズームイン＃1

CSS 画像ホバー効果ズームは、ユーザーが画像の上にカーソルを置いたときに画像を拡大する一種の効果です.

これは、サイトで高解像度の画像を誇示するための優れた方法であり、ユーザーが初めて画像にカーソルを合わせたときに驚きの要素を追加します.

figure img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

2.ズームイン＃2

基本的に、この CSS 画像のホバー効果のズームは、上で説明したものとまったく同じです.

ズーム効果は、カーソルを合わせると拡大する虫めがねを作成します.このホバー効果では、画像の幅を変更するだけで見た目が変わります.

figure img {
  width: 300px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 350px;
}

3. ズームアウト # 1

この CSS 画像のホバー効果は、上で説明した効果 (ズームイン # 1) とまったく同じです.

値を減らすことで画像をズームアウトする画像効果でわかるように.

figure img {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  -webkit-transform: scale(1);
  transform: scale(1);
}

4.ズームアウト＃2

この CSS 画像のホバー効果は、上で説明した効果 (ズームイン #2) とまったく同じです.

このタイプの効果は、主にポートフォリオ サイトで使用されます.画像にユーザーの詳細を表示したい場合に便利です.

CSSコードは次のとおりです.

figure img {
  width: 400px;
  height: auto;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure:hover img {
  width: 300px;
}

5.スライド

スライド効果は、ホバーするとすべての画像のスライドショーを順番に表示し、ホバーしないと通常に戻ります.

使用する画像の幅が「表示したい範囲＋スライドさせたい距離」より大きい場合は、サンプルコードで指定する必要はありません.

CSSコードは次のとおりです.
フィギュア画像 {
左マージン: 30px;
-webkit-変換: スケール (1.5);
変換: スケール (1.5);
-webkit-transition: .3s イーズインアウト.
トランジション: .3s イーズインアウト.
}
図:ホバー画像 {
マージン左: 0;
}
https://untiedblogs.com/15-amazing-css-image-hover-effects-zoom/