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

Now we have completed our CSS section,  Here is our updated output with CSS. Hope 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…..

1. How to design HTML Loader using HTML CSS JAVASCRIPT

2. Simple CSS loaders | 8+ Easy Css loaders with only Html 

3. Circular Progress Bar using HTML,CSS and Javascript – Codewithrandom