The Effect of CSS Filter Grayscale Bookmark

Recently I wrote about the grayscale CSS filter and how I used it for an image hover effect. While I played around with it, I noticed that the filter not only works on the image it‘s applied to, but all of its applied styles as well.

As an example, the following rule will convert the image, as well as all other properties containing a color value to grayscale:

.grayscale {
    filter: grayscale(1);
    padding: 1rem;
    border: thick dashed #d61925;
    background-color: #79c9d4;
}
View of the beach of Tai Long Wan in Hong Kong
Original image
View of the beach of Tai Long Wan in Hong Kong
The same image with the grayscale filter applied

The effect of all colors being converted does make sense, yet it was slightly unexpected when I first noticed it. So in case you want to keep the colors of your properties as intended, simply wrap the image with another element and apply the filter for the image seperately.


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!