Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Question

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Is there a way to make the black ring transparent upon hover by changing

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 doesn't seem to be working for me. Any suggestions on how to achieve this effect?

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>

javascript html css

Answer 1

Answer №1

To achieve this effect, you can create a pseudo element with an absolute position and expand it by 10px (5px for border and 5px for the gap). Add a box shadow to the pseudo element and apply a transition effect on it instead of the main element.

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>

Answer 2

To achieve this effect, you can create a pseudo element with an absolute position and expand it by 10px (5px for border and 5px for the gap). Add a box shadow to the pseudo element and apply a transition effect on it instead of the main element.

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>

Answer 3

Answer №2

I believe there may be another way to accomplish this, but it can be achieved using a pseudo element

here is an 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>

Answer 4

I believe there may be another way to accomplish this, but it can be achieved using a pseudo element

here is an 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>

Achieving a transparent inner box-shadow effect on hover: a step-by-step guide

Answer №1

Answer №2

Similar questions

What is the best way to incorporate template literals (` `) into existing template literals?

What could be causing my Ajax JSON data to not return accurately despite appearing correctly in the console logs?

Delay the axios get request in the useEffect

Cool ways to showcase HTML content in AngularJS

How to effortlessly convert a JSON string into a JavaScript object

Executing a function upon loading a page triggered by a submitted form

The iOS website won't fully load until the button is tapped two times

Maintain the values of radio buttons, dropdowns, and checkboxes using Javascript

Guide to sending an array to a Node.js web service using AngularJS

Add a touch of mystery to a triangle SVG with CSS shadows

The webpage at 'https://abcd.ac.in/' has been declined to be displayed in a frame due to the 'X-Frame-Options' being set to 'sameorigin'

Different ways to dynamically change tailwind colors during execution

The drop-down menu does not maintain its selected option after the window is refreshed

PHP and JQuery not working together to update database

Is it possible to create a pie chart using Chart.js with data fetched through an Ajax HTTP GET

No data being fetched through Ajax

Create a file object using content with the help of JavaScript

The error message "TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modal" is indicating that there is an

Can a constructor function be utilized as a parameter type in another function within TypeScript?

I am eager to retrieve the outcome once all the queries have been completed within the loop (using express.js, react.js, and MySQL)