Fancy border on hover | On Hover Border Animation Image Css
fancy border on hover | On Hover Border Animation Image Css
Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Fancy border on hover. We use HTML & CSS for Fancy border on hover. Hope you enjoy our blog so let’s start with a basic HTML structure for the Fancy border on the hover.
HTML code
<img src="https://picsum.photos/id/1069/200/200" >
<img src="https://picsum.photos/id/1074/200/200" style="--color:#0B486B">
<img src="https://picsum.photos/id/1012/200/200" style="--color:#BD1550">
There is all HTML code for the Fancy border on hover. Now, you can see output without CSS, then we write CSS for the Fancy border on hover.

Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
img {
--color: #FA6900; /* the color of the border */
--border: 10px; /* the thickness of the border */
--offset: 30px; /* control the movement of the border */
--gap: 5px; /* the gap on hover */
border-radius: 50%;
cursor: pointer;
padding: calc(var(--border) + var(--gap));
border: var(--offset) solid #0000;
--_m: radial-gradient(50% 50%, #000 calc(100% - var(--offset)),#0000 calc(100% - var(--border)));
-webkit-mask: var(--_m);
mask: var(--_m);
--_g: #0000 calc(99% - var(--border)), var(--color) calc(100% - var(--border)) 99%,#0000;
--_s: var(--offset);
--_r: 100% 100% at;
background:
radial-gradient(var(--_r) 0 0 ,var(--_g)) calc(100% + var(--_s)) calc(100% + var(--_s)),
radial-gradient(var(--_r) 100% 0 ,var(--_g)) calc(0% - var(--_s)) calc(100% + var(--_s)),
radial-gradient(var(--_r) 0 100%,var(--_g)) calc(100% + var(--_s)) calc(0% - var(--_s)),
radial-gradient(var(--_r) 100% 100%,var(--_g)) calc(0% - var(--_s)) calc(0% - var(--_s));
background-size: 50% 50%;
background-repeat: no-repeat;
transition: .4s;
}
img:hover {
--_s: 0px
}
body {
margin:0;
background:#ccc;
display:grid;
min-height:100vh;
grid-auto-flow:column;
place-content:center;
}