Reputation: 243
I want to make black ring which appears on hover to be transparent. but when i change box-shadow: 0 0 0 5px #000, 0 0 0 10px green
to box-shadow: 0 0 0 5px transparent, 0 0 0 10px green
it not appearing. how do i achieve it?
html {
background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
background-size: 100%;
}
div{
position: relative;
width: 150px;
height: 150px;
background: #ccc;
border-radius: 50%;
transition: 0.3s;
border: 5px solid #fff;
}
div:hover{
box-shadow: 0 0 0 5px #000, 0 0 0 10px green;
}
<div></div>
Upvotes: 9
Views: 684
Reputation: 6827
I don't think so you can do this on this way but yes it is possible by using pseudo element
for example
div:after {
content: "";
bottom: -10px;
top: -10px;
left: -10px;
right: -10px;
border-radius: 50%;
position: absolute;
transition: all 0.3s;
}
div:hover:after {
box-shadow: 0 0 0 5px green;
}
html {
background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
background-size: 100%;
}
div {
position: relative;
width: 150px;
height: 150px;
background: #ccc;
border-radius: 50%;
transition: 0.3s;
border: 5px solid #fff;
}
div:after {
content: "";
bottom: -10px;
top: -10px;
left: -10px;
right: -10px;
border-radius: 50%;
position: absolute;
transition: all 0.3s;
}
div:hover:after {
box-shadow: 0 0 0 5px green;
}
<div></div>
Upvotes: 2
Reputation: 31920
Simply add a pseudo element using position absolute and make that expand by 10 px ( 5px for border and 5px for the gap) and then add box shadow and also you need to add transition on the pseudo element now instead of the element itself
html {
background-image: url('https://cdn-images-1.medium.com/max/800/1*aoR-yl7jicuEvQ5hZoQvjw.png');
background-size: 100%;
}
div{
position: relative;
width: 150px;
height: 150px;
background: #ccc;
border-radius: 50%;
border: 5px solid #fff;
}
div:after{
position:absolute;
border-radius: 50%;
content:"";
z-index:-1;/* depends on your need change to 1 if want to overlap the div on hover*/
top:-10px;
bottom:-10px;
left:-10px;
right:-10px;
transition:all 0.3s;
}
div:hover:after{
box-shadow:0 0 0 5px green;
}
<div></div>
Upvotes: 4