【CSS】グレースケールの画像をホバーで色を表示させる-（filterプロパティ）

2023年8月14日

今回はfilterプロパティについて学んで行きましょう

スポンサーリンク

filter:grayscale;

filter:grayscale;画像にfilter:grayscale(100%);を指定しておいて、ホバーすると色が表示されるような使われ方をよくします。

  <div class="grid">
  <div class="filter"><img src="img/01.jpg" alt=""></div>
  <div class="filter"><img src="img/02.jpg" alt=""></div>
  <div class="filter"><img src="img/03.jpg" alt=""></div>
  <div class="filter"><img src="img/04.jpg" alt=""></div>
  <div class="filter"><img src="img/05.jpg" alt=""></div>
  <div class="filter"><img src="img/06.jpg" alt=""></div>
</div>
.grid {
  margin: 0 auto;
  display: grid;
  width: 1520px;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.grid img {
  filter: grayscale(100%);
}
.grid img:hover {
  filter: grayscale(0);
}

初期値：none;

filter:grayscale(100%);でグレーになります。

初期値：none;
filter: grayscale(100%);

hoverしたときに filter: grayscale(0) を指定すると、元の色が表示されます。

その他のフィルター関数

filter: blur;

ぼかしを入れることができます。
％指定はできません。

filter: blur(5px);

filter:brightness;

明るさを指定します。

filter:brightness(130%);ではより光ったような印象にすることができますね。

filter:brightness(50%);
filter:brightness(100%);
filter:brightness(130%);

filter:contrast;

コントラストを調整します。

filter:contrast(150%);では明るい箇所と暗い箇所がよりはっきりします。

filter:contrast(50%);
filter:contrast(100%);
filter:contrast(150%);

filter:drop-shadow(ｘ軸 ｙ軸 ぼかし 色);

画像にドロップシャドウをかけます。

filter:drop-shadow(3px 3px 3px #000);

filter:hue-rotate(角度);

色相環の回転をします。

filter:hue-rotate(90deg);

180(deg)で180°回転した色になります。

CSSだけで色味を調節できて便利です。

filter:hue-rotate(180deg);
filter:hue-rotate(270deg);

filter:invert;

階調を反転します。

filter:invert(100%);

filter:opacity;

不透明度を調節します。

filter:opacity(0);で非表示になります。

filter:opacity;もマウスオーバーで透明度を下げる表現がよく使われます。

filter:opacity(0.5);

filter:saturate;

鮮やかさの調節

filter:saturate(150%);

filter:sepia;

セピアになります。

雰囲気を出したい画像に良いですね。

filter:sepia(100%);

同じカテゴリの記事一覧へ

HTML&CSS

はじめての1冊におすすめ

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

HTML ＆CSS

Posted by sweetchilli