【CSS】グレースケールの画像をホバーで色を表示させる-(filterプロパティ)
![](https://www.beginavi.net/wp-content/uploads/2023/08/fc6927a4cd7fc6f068de9eb5d3ae4aff-1.jpg)
![](https://www.beginavi.net/wp-content/uploads/2021/06/4495bed8051fcc9fd4ac4bababda36e3.png)
今回は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%);でグレーになります。
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/grayscale100.jpg)
hoverしたときに filter: grayscale(0) を指定すると、元の色が表示されます。
その他のフィルター関数
filter: blur;
ぼかしを入れることができます。
%指定はできません。
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/34ee349f01ce5ef8cbaaa8e21d9918b4.jpg)
filter:brightness;
明るさを指定します。
filter:brightness(130%);ではより光ったような印象にすることができますね。
![](https://www.beginavi.net/wp-content/uploads/2023/08/bb68c33fe00105d83fd926ec975566b9.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/d8a85fc533b229a537e968132e6d7653.jpg)
filter:contrast;
コントラストを調整します。
filter:contrast(150%);では明るい箇所と暗い箇所がよりはっきりします。
![](https://www.beginavi.net/wp-content/uploads/2023/08/contrast50.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/contrast150.jpg)
filter:drop-shadow(x軸 y軸 ぼかし 色);
画像にドロップシャドウをかけます。
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/drop-shadow.jpg)
filter:hue-rotate(角度);
色相環の回転をします。
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/hue-rotate90deg.jpg)
180(deg)で180°回転した色になります。
CSSだけで色味を調節できて便利です。
![](https://www.beginavi.net/wp-content/uploads/2023/08/hue-rotate180deg.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/hue-rotate270deg.jpg)
filter:invert;
階調を反転します。
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/invert100.jpg)
filter:opacity;
不透明度を調節します。
filter:opacity(0);で非表示になります。
filter:opacity;もマウスオーバーで透明度を下げる表現がよく使われます。
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/opacity0.5.jpg)
filter:saturate;
鮮やかさの調節
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/saturate150.jpg)
filter:sepia;
セピアになります。
雰囲気を出したい画像に良いですね。
![](https://www.beginavi.net/wp-content/uploads/2023/08/none.jpg)
![](https://www.beginavi.net/wp-content/uploads/2023/08/sepia100.jpg)
同じカテゴリの記事一覧へ
はじめての1冊におすすめ