I tried to create a circle which border
should look same color as div color and a space between the border and div. The in between space should show the background color of what ever div it is on. the background color is changeable so we shouldn't hardcode it.
Instead i have given transparency using rgba
mode. All work fine am trying to get this effect on hover of the circle but i couldn't able to get the hover because i'm trying to display:block
on hover and in normal state it is display:none;
This are for the after selector hence i tried this effect with after 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 STATE ON HOVER it should become like THIS with effects if possible If there is any tutorial to do this i'll happy to learn. Thanks
To create a circle we can set the border-radius on the element. This will create curved corners on the element. If we set it to 50% it will create a circle. If you set a different width and height we will get an oval instead.
The default background color of a div is transparent . So if you do not specify the background-color of a div, it will display that of its parent element.
set position:relative;
to the .main
and set left/right/top/bottom
of the .main:after
to zero and add transition:all ease 0.3s
for animating.
in the .main:hover:after
change left/right/top/bottom
to -5px
.
demo
.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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With