How to create color border based on background in circle div?

Question

I tried to create a circle that the border should look the same as the color of the div, and the space between the border and the div. Between the spaces, the background color of what has ever been on it should be displayed. the background color is variable, so we don’t have to hard code it.

Instead, I gave transparency using rgba mode. Everyone works fine, trying to get this effect when hovering, but I couldn’t get stuck, because I try to display:block hover and in normal state it is display:none; This is for the selector after so I tried this effect after the selector.

CODE CSS

 .main{ width:80px; height:80px; border-radius:100%; background-color:#007eff; text-align:center; line-height:80px; } .main:hover + .main:after{ display:block; } .main:after{ width:86px; height:86px; border-radius:100%; background:rgba(255,255,255,0.1); border:2px solid #007eff; position:absolute; content:""; z-index:-1; top:3px; left:3px; display:none; } body{ background-color:#888; } 

HTML

 <div class="main"><i class="fa fa-camera-retro fa-lg"></i> </div> 

PROBLEM STATUS ON HOVER it should become like IT with effects, if possible If there is any tutorial for this, I will be happy to find out. Thanks

Answer 1

set position:relative; in .main and set left/right/top/bottom of .main:after to zero and add transition:all ease 0.3s for the animation.

in .main:hover:after change left/right/top/bottom to -5px .

demonstration

 .main{ width:80px; height:80px; border-radius:100%; background-color:#007eff; text-align:center; line-height:80px; position:relative; margin:6px; } .main:after{ border-radius:100%; background:rgba(255,255,255,0.1); border:2px solid #007eff; position:absolute; content:""; z-index:-1; top:0px; left:0; bottom:0; right:0; transition:all ease 0.3s; } .main:hover:after{ top:-5px; bottom:-5px; right:-5px; left:-5px; } 

Answer 2

Just add .main:hover:after to display it as block when you hover WORKING FIDDLE

 .main:hover:after{ display:block; } 

Answer 3

Try something like this

CSS:

 .main{ width:80px; height:80px; border-radius:100%; background-color:#007eff; text-align:center; line-height:80px; } .main:hover:after{ width:86px; height:86px; border-radius:100%; background:rgba(255,255,255,0.1); border:2px solid #007eff; position:absolute; content:""; z-index:111; top:3px; left:3px; } body{ background-color:#888; } 

HTML:

 <div class="main"><i class="fa fa-camera-retro fa-lg"></i> </div> 

Fiddle

Answer 4

you could use box-shadow instead of a pseudo-element: http://jsfiddle.net/Ku6BQ/24/

 .main { width:80px; height:80px; border-radius:100%; background-color:#007eff; text-align:center; line-height:80px; } .main:hover { box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff; } body { background-color:#888; 

} If you are transparent and display behind a gradient or image, you can still use box-shadow: http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/

 .main { width:80px; height:80px; border-radius:100%; box-shadow:inset 0 0 0 100px #007eff; text-align:center; line-height:80px; } .main:hover { border:4px transparent solid; margin:-4px; box-shadow: 0 0 0 2px #007eff, inset 0 0 0 100px #007eff;; } html { background :#888 url(http://lorempixel.com/200/200/nature) repeat; height:100%; } 

Answer 5

Improvement (write-only) of the shadow shadow idea presented by GCyrillus

 .main { width:80px; height:80px; border-radius:100%; background-color:#007eff; text-align:center; line-height:80px; border: solid 4px transparent; background-clip: padding-box; box-shadow: 0 0 0 0px white; -webkit-transition: all 1s; transition: all 1s; } .main:hover { box-shadow: 0 0 0 6px #007eff; } body { background-color:#888; } 

fiddle