border image css || hover overly image css|| image hover css animation
In this video, I create a beautiful on-hover border style in just CSS with a sample query that you easily understand. I also upload the video on youtube and also the link to this video at the Bottom watch it now and don't forget to subscribe to my channel..
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>Fancy image decoration on hover</title>
</head>
<body>
<!-- upload your img -->
<img src="" alt="an old car">
<img src="" alt="an girl photo"
style="--c:#668284;--b:1px;--s:18px">
</body>
</html>
CSS
img{
--s: 15px; /*size of the frame */
--b: 2px ; /*border thickness */
--w: 200px ; /*width of the image */
--c: #7B3B3B ; /*size of the frame */
width: var(--w);
aspect-ratio: 1;
object-fit: cover;
padding: calc(2*var(--s));
--_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),
var(--c) 0;
background:
linear-gradient( var(--_g)) 50%/100% var(--_i,
100%) no-repeat,
linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%)
100% no-repeat;
outline: calc(var(--w)/2) solid #0009;
outline-offset: calc(var(--w)/-2 - 2*var(--s));
transition: .4s;
cursor: pointer;
}
img:hover{
outline: var(--b) solid var(--c);
outline-offset: calc(var(--s)/2);
--_i: calc(100% - 2*var(--s));
}
body
{
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
align-items: center;
grid-auto-flow: column;
gap: 20px;
background: rgba(0,0,0,0.4);
}
IMAGE LINK
Click me
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
imgs
