Fancy border on hover | On Hover Border Animation Image Css

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.

Output

Fancy border on hover | On Hover Border Animation Image Css

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

Fancy border on hover | On Hover Border Animation Image Css

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the  Fancy border on hover, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a  Fancy border on hover using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Temani Afif

Check out more…..





Leave a Reply