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

※当サイトには一部宣伝が含まれます。

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

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

この記事の目次

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

マウスオーバーで画像が拡大表示！シンプルなアニメーション
filter：hue-rotateのエフェクト(色相回転)＋画像が拡大するアニメーション
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;
  /* 立体感を出すために影をつける */
  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%;
}

ここがポイント！

flexboxとmargin:0 autoで要素をど真ん中に設置
overflow: hiddenで枠に収まらないサイズの要素は隠す
object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
hover前の.image imgのwidthを1200%に指定して画像を拡大
hover後の.image imgはwidthを100％に指定し画像を縮小することでズーム効果をつける
フィルタープロパティでhover後の明るさ(brightness)・コントラスト(contrast)・彩度(saturate)を指定
transitionで滑らかなアニメーションを実現

２. 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%;
}

ここがポイント！

flexboxとmargin:0 autoで要素をど真ん中に設置
overflow: hiddenで枠に収まらないサイズの要素は隠す
object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
hover前の.image imgのwidthを1200%に指定して画像を拡大
hover後の.image imgはwidthを100％に指定し画像を縮小することでズーム効果をつける
フィルタープロパティでhover後の明るさ(brightness)・色相回転(hue-rotate)を指定
transitionで滑らかなアニメーションを実現

３. 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%;
}

ここがポイント！