Grayscale Hover Effect

Grayscale Hover Effect code:


1.index.html:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Grayscale Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="image.jpg"> </body> </html>

2.style.css:

body { margin: 0; padding: 0; background: rgb(211,11,1); } img { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); filter: grayscale(100%); transition: 0.5s ease-in-out; } img:hover { filter: grayscale(0%); }

Оставьте комментарий

Ваш адрес email не будет опубликован.