【filterプロパティ】hoverすると美しさ100倍!CSS画像エフェクト3選

今回はtransitionfilterプロパティ(invert hue-rotate brightness sepia saturate blur contrast grayscale) の応用です。画像が美しく変化するCSShoverアニメーションを3つご紹介します。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

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

 

1. filter:blurの応用!hoverするとぼやけている画像が動的に変化するfilterエフェクト

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

コードを見る
<div>
  <div class="container">
    <div class="bg-img">
      <div class="image">
        <figure>
          <img class="image1" src="https://www.twinzlabo.com/wp-content/uploads/2020/06/slide-shoes.jpg" />
          <img class="image2" src="https://www.twinzlabo.com/wp-content/uploads/2020/06/slide-shoes.jpg" />
        </figure>
      </div>
    </div>
  </div>
</div>
.container {
  /* flexboxでcontainerの中身をど真ん中に設置 */
  display: flex;
  justify-content: center;
}
.bg-img {
  cursor : pointer;
  /* cursor: pointerを設定することでカーソルが画像の上にある時カーソルがpointerに変化 */
}
.bg-img .image {
	position: relative;
	width: 300px;
	height: 200px;
}
.bg-img figure {
	width: 300px;
	height: 200px;
	overflow: hidden;
  /* 画像のはみ出した箇所を隠す */
}
/* ぼやけて表示されている画像の設定 */
.bg-img .image1 {
	position: absolute;
  /* .image1の位置を指定 */
	left: 0;
	z-index: 100;
  /* ボックスの重なる順序を指定(レイヤー順序を指定できるイメージ) */
	transition: .8s ease-in-out;
  /* 時間を指定(ease-in-outで開始時と終了時が緩やかになる) */
  filter: blur(8px);
  /* ぼかし度合いの調整 */
    height: inherit;
    width: inherit;
    /* inheritは親要素で指定した値がそのまま受け継がれる */
}
/* 後から出てくるぼやけていない画像の設定 */
.bg-img .image2 {
	margin-left: 325px;
	transition: .8s ease-in-out;
  /* 画像が現れる時間を指定 */
  width: inherit;
  height: inherit;
  /* inheritは親要素で指定した値がそのまま受け継がれる */
}
/* hover後の設定 */
.bg-img figure:hover .image1 {
  filter: blur(0);
  /* ぼかしを0に指定 */
  transition: .9s ease-in-out;
  /* 画像が現れる時間を指定 */
}
.bg-img figure:hover .image2 {
	margin-left: 0px;
  /* 画像が右からぼやけがなくなる動きをつけるための調整 */
}
ここがポイント!
  1. hover前・hover後のimage1(ぼかしあり)・image2(ぼかしなし)クラスを用意
  2. .image1、.image2にtransitionでエフェクトの速度調整
  3. .image1にfilter:blur()でぼかし度合いを調整
  4. .image2のmargin-leftをhover前後で325→0に指定することで右から左へスライド
  5. 画像の階層・filter:blurの使い方・transitionで動きをつけるなど応用的な実装を実現

 

2. invert × hue-rotate × brightnesshoverで光り輝く星空のようなfilterエフェクト

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

コードを見る
<div class="container">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1535007726788-fed8106a64cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
  </div>
</div>
/* hover前のスタイル */
img {
  margin: 0 auto;
  width: 350px;
  height: 220px;
  cursor: pointer;
  transition: 4000ms ease-in;
  /* エフェクトの速度調整 */
  filter: invert(3%) hue-rotate(0) brightness(500%);
  /* invertで階調反転・hue-rotateで色相回転・brightnessで明るさの度合いの指定 */
}
/* hover後のスタイル */
img:hover {
  filter: invert(0%) hue-rotate(2000deg) brightness(500%);
  /* hover後の階調反転・色相回転・明るさの度合いの指定 */
}
ここがポイント!
  1. hover前・hover後のimgスタイルを用意
  2. hover前のimgにtransitionでエフェクトの速度調整・filter: invert() hue-rotate() brightness()で階調反転・色相回転・明るさの調整
  3. hover後のimgにも同じくfilter: invert() hue-rotate() brightness()で階調反転・色相回転・明るさの調整
  4. 今回はhover前:invert(3%) hue-rotate(0) brightness(500%)、hover後:invert(0%) hue-rotate(2000deg) brightness(500%)で光り輝く星空のようなエフェクトを実現

 

3. contrast × grayscale × brightness × saturate × invert+hoverで感動するほどの景色に変わるfilterエフェクト

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

コードを見る
<div class="container">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1468186402854-9a641fd7a7c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" style="background-size:cover;" class="img" alt="">
  </div>
</div>
/* hover前のスタイル */
img {
  margin: 0 auto;
  width: 350px;
  height: 220px;
  cursor: pointer;
  transition: 500ms ease-in;
  /* エフェクトの速度調整 */
  filter: contrast(100%) grayscale(100%) brightness(100%) saturate(100%) invert(3%);
  /* contrastでコントラスト,grayscaleで白黒の度合い,brightnessで明るさ,saturateで色彩 ,invertで階調反転の調整*/
}
/* hover後のスタイル */
img:hover {
  filter: contrast(105%) grayscale(0) brightness(250%) saturate(120%) invert(0%);
  /* hover後のfilterを指定 */
}
ここがポイント!
  1. hover前・hover後のimgスタイルを用意
  2. hover前のimgにtransitionでエフェクトの速度調整・filter: contrast() grayscale() brightness() saturate() invert()でコントラスト・白黒度合い・明るさ・色彩・階調反転を調整
  3. hover後のimgにも同じくfilter: contrast() grayscale() brightness() saturate() invert()でコントラスト・白黒度合い・明るさ・色彩・階調反転を調整
  4. 今回はfilterプロパティを応用して白黒画像が100倍美しく変化するエフェクトを実現

参考

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

ふたご


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

ふたご

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

 

   話だけ聞いてみる