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.
Output
CSS code
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;
}
Now we have completed our CSS section, Here is our final updated output CSS.
Final Output
