user5397448
user5397448

Reputation: 243

How to make inner box-shadow transparent on hover

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

Answers (2)

Ismail Farooq
Ismail Farooq

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

bugwheels94
bugwheels94

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

Related Questions