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%); }
Cool Button Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title>Cool Button Hover Effect</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <a […]
Menu Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title>Menu Hover Effect</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <div class=»navbar»> <div […]
Animation Glow Effects Code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Animation Glow Effects</title> <link rel=»stylesheet» type=»text/css» href=»style.css»> </head> <body> ¨K0K </body> […]
Animated Heart code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset=»UTF-8″> <title>Animated Heart</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <div class=»heart»></div> </body> </html> 2.style.css: […]
