7

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

Improve this question
1

5 Answers 5

Reset to default
4

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks +1. This is what i'm looking for. can i know how it can be done. @Mohsen
4

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

.main:hover:after{ display:block; }
Improve this answer

2 Comments

Thanks for the exact selector. +1
Sorry i accepted Mohsen answer which is what am exactly looking for. Even though selector you given Helps me. You are almost accepted. Thanks once again.
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

Improve this answer

Comments

2

you could use box-shadow instead 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 it it transparent and show behind a gradient or an image, you may 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%; }
Improve this answer

8 Comments

Thanks +1 for the alternative trick. but i think it won't give the background divs colors in the gap
body background-color is #888888 and first box-shadow is #88888 , same colors used :)
actually, the best would be to have something transparent, so you see through the background, either a gradient or an image jsfiddle.net/Ku6BQ/25 jsfiddle.net/Ku6BQ/26
thanks. I can able to see the background. Different trick. I didn't have much aware in box-shadow. i'll try to learn. again +1. Really different
it is not a trick, you can draw as many shadows as wanted on one element, with blur or not :)
|
1

An improvement (just for the record) on he idea of a box shadow as apported 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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.