CSS image hover greyscale
The CSS on this page is not for a specific WordPress theme or a specific plug-in, but can be applied to any WordPress website.
Keep in mind that the way you integrate the CSS-code or classes on the site, is a bit different for each website builder differs. It is also true that you can integrate regular CSS-code everywhere, but not every website builder allows you to work with CSS. Site (page) Builders such as Kadence Pro, Generateblockspro, Elementor Pro all have options to use CSS.
Keep in mind that the way you integrate the CSS-code or classes on the site, is a bit different for each website builder differs. It is also true that you can integrate regular CSS-code everywhere, but not every website builder allows you to work with CSS. Site (page) Builders such as Kadence Pro, Generateblockspro, Elementor Pro all have options to use CSS.
CSS-code option 1 – CSS image hover greyscale
One of the most beautiful and calm (stylish) effects on a website is the use of a CSS code that converts an image to a grayscale image when the visitor hovers the mouse over it.
You can adjust the percentages (%) in this CSS code to your liking.
Important: This code applies to all images on the website. If you don’t want that, you can apply the CSS code from option (2) or option (3).
You can adjust the percentages (%) in this CSS code to your liking.
Important: This code applies to all images on the website. If you don’t want that, you can apply the CSS code from option (2) or option (3).
/* CSS-code option 1 - CSS image hover greyscale */
img {
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(0%); /* FF 35+ */
}
img:hover {
-webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(100%); /* FF 35+ */
}CSS-code option 2 – CSS image hover greyscale
This is almost the same code, but uses a CSS class. This means that you can decide which images it affects.
You can adjust the percentages (%) in this CSS code to your liking.
Important: This code does NOT apply to all images on the website. You place the code in the Extra CSS, or a code plugin. Each image you want to apply this effect to must have the class grayscalebas
You can adjust the percentages (%) in this CSS code to your liking.
Important: This code does NOT apply to all images on the website. You place the code in the Extra CSS, or a code plugin. Each image you want to apply this effect to must have the class grayscalebas
/* CSS-code option 2 - CSS image hover greyscale */
.grayscalebas img {
transition: filter .5s ease-in-out;
-webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(0%); /* FF 35+ */
}
.grayscalebas img:hover {
-webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
filter: grayscale(100%); /* FF 35+ */
}CSS-code option 3- CSS image hover greyscale
The code below does just about the same thing as the code above, but does it in a slightly different way.
Of course, you can adjust the decimal values of transparency/opacity in this CSS to your liking.
Important: This code does NOT apply to all images on the site. Any image you want to apply this effect to must have the class
grayscalebas3
Of course, you can adjust the decimal values of transparency/opacity in this CSS to your liking.
Important: This code does NOT apply to all images on the site. Any image you want to apply this effect to must have the class
grayscalebas3
/* CSS-code option 3- CSS image hover greyscale */
.grayscalebas3 img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
opacity: 1;
}
.grayscalebas3 img:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.9;
}
This illustration shows the effect of an image with the CSS code grayscale image on hover (option 2).