Elementor AI – Custom CSS
I used Elementor AI to write some CSS to
add a hover effect to an image which fades the image to grey when hovered.
It gave me this.
Let’s try it on the image.
figure:hover img { filter: grayscale( 100%); transition: filter 0.5s ease-in-out; }My AI tool suggested something similar
write css to add a hover effect to an image which fades the image to grey when hovered.
Assuming you have an image element with a class name of “image”:
.image {
transition: filter 0.3s ease;
}
.image:hover {
filter: grayscale(100%);
}The “transition” property is used to change an element from one style to another style smoothly. A “filter:brightness(50%)” is used to darken the image to 50% of the original when the mouse pointer hovers over it. You could adjust the percentage to whatever suits your needs.
Excerpt
The author used Elementor AI to write CSS for creating a hover effect on an image, making it fade to grey when hovered over. The AI tool suggested similar CSS, using the “transition” property and a “filter: grayscale(100%)” to achieve the desired effect.
43 words