hoverで画像が拡大(ズーム)するCSSアニメーション3選(+filterエフェクト)

今回はCSSだけでhover(マウスオーバー)すると画像サイズが拡大(ズーム)するアニメーションを3つご紹介。それぞれに違ったfilterエフェクトがついています。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

 

1. マウスオーバーで画像が拡大表示!シンプルなアニメーション

動きは下の画像のような感じになります

コードを見る
  <div class="images">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80">
      <span>hover</span>
    </div>
  </div>
.images {
  /* 親要素の配置・大きさを指定 */
  display: flex;
  width: 100%;
  padding: 4% 2%;
  height: 50vh;
}
.image {
  /* 要素を真ん中に配置 */
  margin: 0 auto;
  /* 要素のサイズを調整 */
  flex: .4;
  /* 要素がはみ出ないように指定 */
  overflow: hidden;
  /* 立体感を出すために影をつける */
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
  /* アニメーション前のフィルターを指定 */
  background : linear-gradient(41deg, purple 25%, orange 50%, rgba(255, 107, 0, 0.48)) fixed;
}
.image img {
  /* 画像全体を枠におさめる指定 */
  background-size: cover;
  /* ズーム感を出すためhover前の画像サイズを指定 */
  width: 1200%;
  height: calc(100% - 100vh);
  /* 画像が滑らかに表示されるように指定 */
  object-fit: cover;
  /* アニメーションの帰りの速度を調整 */
  transition: 1.5s;
  /* アニメーション前のフィルターを指定 */
  filter: contrast(0) saturate(0) brightness(0);
}
/* 文字のスタイルを指定 */
.image span {
  font-weight: bold;
  color: #fff;
  font-size: 40px;
  display: block;
  text-align: center;
  line-height: 1.5;
  cursor: grab;
}
.image:hover img {
  /* hover後のアニメーション速度を調整 */
  transition: 1.5s;
  /* アニメーション後ののフィルターを指定 */
  filter: contrast(110%) saturate(120%) brightness(120%);
  /* hover後のサイズを指定(元の大きさ) */
  width: 100%;
  height: 100%;
}
ここがポイント!
  1. flexboxとmargin:0 autoで要素をど真ん中に設置
  2. overflow: hiddenで枠に収まらないサイズの要素は隠す
  3. object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
  4. hover前の.image imgのwidthを1200%に指定して画像を拡大
  5. hover後の.image imgはwidthを100%に指定し画像を縮小することでズーム効果をつける
  6. フィルタープロパティでhover後の明るさ(brightness)・コントラスト(contrast)・彩度(saturate)を指定
  7. transitionで滑らかなアニメーションを実現

 

2. filter:hue-rotateのエフェクト(色相回転)+画像が拡大するアニメーション

動きは下の画像のような感じになります

コードを見る
  <div class="images">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80">
      <span>hover</span>
    </div>
  </div>
.images {
  /* 親要素の配置・大きさを指定 */
  display: flex;
  width: 100%;
  padding: 4% 2%;
  height: 50vh;
}
.image {
  /* 要素を真ん中に配置 */
  margin: 0 auto;
  /* 要素のサイズを調整 */
  flex: .4;
  /* 要素がはみ出ないように指定 */
  overflow: hidden;
}
.image img {
  /* 画像全体を枠におさめる指定 */
  background-size: cover;
  /* ズーム感を出すためhover前の画像サイズを指定 */
  width: 1200%;
  height: calc(100% - 100vh);
  /* 画像が滑らかに表示されるように指定 */
  object-fit: cover;
  /* アニメーションの帰りの速度を調整 */
  transition: 2s;
  /* アニメーション前のフィルターを指定 */
  filter: hue-rotate(0deg) contrast(100%);
}
/* 文字のスタイルを指定 */
.image span {
  font-weight: bold;
  color: #888888;
  font-size: 40px;
  display: block;
  text-align: center;
  line-height: 1.5;
  cursor: grab;
}
.image:hover img {
  /* hover後のアニメーション速度を調整 */
  transition: 2s;
  /* アニメーション後ののフィルターを指定 */
  filter: hue-rotate(3600deg) contrast(150%);
  /* hover後のサイズを指定(元の大きさ) */
  width: 100%;
  height: 100%;
}
ここがポイント!
  1. flexboxとmargin:0 autoで要素をど真ん中に設置
  2. overflow: hiddenで枠に収まらないサイズの要素は隠す
  3. object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
  4. hover前の.image imgのwidthを1200%に指定して画像を拡大
  5. hover後の.image imgはwidthを100%に指定し画像を縮小することでズーム効果をつける
  6. フィルタープロパティでhover後の明るさ(brightness)・色相回転(hue-rotate)を指定
  7. transitionで滑らかなアニメーションを実現

 

3. filter: blur(ぼやけ)のエフェクト+画像が拡大するアニメーション

動きは下の画像のような感じになります

コードを見る
  <div class="images">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80">
      <span>hover</span>
    </div>
  </div>
.images {
  /* 親要素の配置・大きさを指定 */
  display: flex;
  width: 100%;
  padding: 4% 2%;
  height: 50vh;
}
.image {
  /* 要素を真ん中に配置 */
  margin: 0 auto;
  /* 要素のサイズを調整 */
  flex: .4;
  /* 要素がはみ出ないように指定 */
  overflow: hidden;
}
.image img {
  /* 画像全体を枠におさめる指定 */
  background-size: cover;
  /* ズーム感を出すためhover前の画像サイズを指定 */
  width: 1200%;
  height: calc(100% - 100vh);
  /* 画像が滑らかに表示されるように指定 */
  object-fit: cover;
  /* アニメーションの帰りの速度を調整 */
  transition: 2s;
  /* アニメーション前のフィルターを指定 */
  filter: blur(1000px);
}
/* 文字のスタイルを指定 */
.image span {
  font-weight: bold;
  color: #888888;
  font-size: 40px;
  display: block;
  text-align: center;
  line-height: 1.5;
  cursor: grab;
}
.image:hover img {
  /* hover後のアニメーション速度を調整 */
  transition: 2s;
  /* アニメーション後ののフィルターを指定 */
  filter: blur(0);
  /* hover後のサイズを指定(元の大きさ) */
  width: 100%;
  height: 100%;
}
ここがポイント!
  1. flexboxとmargin:0 autoで要素をど真ん中に設置
  2. overflow: hiddenで枠に収まらないサイズの要素は隠す
  3. object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
  4. hover前の.image imgのwidthを1200%に指定して画像を拡大
  5. hover後の.image imgはwidthを100%に指定し画像を縮小することでズーム効果をつける
  6. フィルタープロパティでhover後のぼやけ度合い(blur)を指定
  7. transitionで滑らかなアニメーションを実現

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる