changing before pseudo element on hover

Question

So i managed to create a inset shadow on an image, after reading around the web..

it works, but i cannot make it change on :hover.

Currently i have:

.shadow {
  position: relative;
  max-width: 100%;
  float: left;
}

.shadow::before {
  border-radius: 100%;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .6);
  transition: box-shadow .2s ease-in-out;
}

.shadow:hover:before {
  box-shadow: inset 5px 5px 55px rbga(0, 0, 0, .8);
}

.shadow img {
  float: left;
  border-radius: 100%;
  width: 300px;
}

<div class="shadow">
  <img src="https://picsum.photos/300/300?image=1015">
</div>

I have put the code here: https://codepen.io/anon/pen/rRwGmV

I hope some of you know how to do this.

Thanks

Answer 1

.shadow {
	position: relative;
	max-width: 100%;
	float: left;
	}
    
    .shadow::before {
        border-radius: 100%;
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: inset 3px 3px 8px red;
        transition: box-shadow .2s ease-in-out;
	   }

.shadow:hover::before {
    box-shadow: inset 5px 5px 55px green;
}
	   
.shadow img {
	  float: left;
    border-radius: 100%;
    width: 300px;
	} 

<div class="shadow">
  <img src="https://picsum.photos/300/300?image=1015">
</div>