Image Fill Color Hover Effect

Image Fill Color code:

1.index.html:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Fill Color</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="imageBox grey"><img src="587.png"></div> <div class="imageBox color"><img src="587.png"></div> </div> </body> </html>

2.style.css:

body { margin: 0; padding: 0; background: black; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1230px; height: 793px; } .imageBox { position: absolute; top: 0; left: 0; } .grey { filter: grayscale(100%); } .color { width: 0; transition: 2s; overflow: hidden; border-right: 2px solid black; } .container:hover .color { width: 100%; }

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *