changing before pseudo element on hover - html

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>

Answer 2

what do you think about do it without :before?
.shadow img{
border-radius: 50%;
box-shadow: 3px 3px 8px rgba(0,0,0,.6);
}
img:hover {
box-shadow: 5px 5px 5px red;
}
<div class="shadow">
<img src="https://picsum.photos/300/300?image=1015">
</div>
Here is my codepen whith this code
Did I forget to do something? How can I improve?