Circle around div when hover

  • A+
Category:Languages

I have a sun shape div. I just want to show a border when hover it with transparent gap between hover border and object.

Circle around div when hover

First I tried with box shadow but cant make white gap. It requires solid color, then I tried with this way. But the gap is not appearing.

Here is my code.

    .sun-quote-pages{       border-radius: 50%;         background-color: #f4953b;         width: 4.1em;         height: 4.1em;         border: 2px solid transparent;         transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;     }          .sun-quote-pages:hover {          transform: scale(1.3);         border: 2px solid #f4953b;         margin: 2px;         padding: 2px;      }               .wrapper{       margin-left:150px;       margin-top:50px;     }
    <div class="wrapper">       <div class="sun-quote-pages">          </div>      </div>

What am I missing here?

Jsfiddle

 


The solution is 'background-clip' found here:

https://css-tricks.com/transparent-borders-with-background-clip/

With it you can prevent the background color from flowing under the border and padding. It is widely supported:

https://caniuse.com/#search=background-clip

so your CSS would become:

.sun-quote-pages{   border-radius: 50%;     background-color: #f4953b;     width: 4.1em;     height: 4.1em;     padding: 2px;      border: 2px solid transparent;     background-clip: content-box;     transition: transform 0.5s ease, border 0.5s ease; }  .sun-quote-pages:hover {     border: 2px solid #f4953b;     transform: scale(1.3); }   .wrapper{   margin-left:150px;   margin-top:50px; } 

See: https://jsfiddle.net/auzjv4rp/11

Or why not have a double border?

See: https://jsfiddle.net/auzjv4rp/13

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: