animation css || mask hover css || image border color in html
In this video, I tell about how to create a hover mask border in your project image
So, watch this full video that I upload on youtube and never forget to subscribe to my channel. My channel name is @skillbeginner
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- I use google link img you use any img -->
<img src="https://picsum.photos/id/1011/250/250" alt="">
<img src="https://picsum.photos/id/1051/250/250" alt="">
</body>
</html>
CSS
img {
--_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
--m:
left var(--_i,0%) top var(--_g),
bottom var(--_i,0%) left var(--_g),
top var(--_i,0%) right var(--_g),
right var(--_i,0%) bottom var(--_g);
-webkit-mask: var(--m);
mask: var(--m);
filter: grayscale();
transition: .3s linear;
cursor: pointer;
}
img:hover {
--_i: 10%;
filter: grayscale(0);
}
body
{
margin: 0;
background: #c9697a;
display:grid;
min-height: 100vh;
grid-auto-flow: column;
place-content: center;
gap: 40px;
}
Click me
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
imgs
