¿Cómo crear un borde basado en el color de fondo en un div circular?

Question

Intenté crear un círculo que border debe verse del mismo color que el color del div y un espacio entre el borde y el div.El espacio intermedio debe mostrar el color de fondo de cualquier div en el que se encuentre.el color de fondo se puede cambiar, por lo que no debemos codificarlo.

En lugar de eso le he dado transparencia usando rgba modo.Todo funciona bien. Estoy tratando de obtener este efecto al pasar el cursor sobre el círculo, pero no pude lograrlo porque estoy tratando de hacerlo. display:block en vuelo estacionario y en estado normal es display:none; Esto es para el selector posterior, por lo que probé este efecto con el selector posterior.

Código 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>

ESTADO DEL PROBLEMAAL PASAR EL PASO debería volverse como ESTE Con los efectos si es posible si hay algún tutorial para hacer esto, estaré feliz de aprender.Gracias

Answer 1

colocar position:relative; hacia .main y establecer left/right/top/bottom del .main:after a cero y sumar transition:all ease 0.3s para animar.

en el .main:hover:after cambiar left/right/top/bottom a -5px.

manifestación

.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

Solo agrega .main:hover:after para mostrarlo como block en vuelo estacionario VIOLÍN DE TRABAJO

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

Answer 3

Prueba algo como esto

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>

VIOLÍN

Answer 4

podrías usar box-shadow en lugar de pseudo-elemento: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;

} Si es transparente y se muestra detrás de un gradiente o una imagen, aún puede usar Shadow de caja: 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

Una mejora (sólo para que conste) en la idea de una sombra de caja proporcionada por 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;
}

violín