【CSSのみ】「filter」画像エフェクト３選＋使い方｜hue-rotate

<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);
  /* ぼかしを０に指定 */
  transition: .9s ease-in-out;
  /* 画像が現れる時間を指定 */
}
.bg-img figure:hover .image2 {
	margin-left: 0px;
  /* 画像が右からぼやけがなくなる動きをつけるための調整 */
}

<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後の階調反転・色相回転・明るさの度合いの指定 */
}

<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を指定 */
}