Selector with :before element for rotated css shadow

Hi, I’m trying to make one image with rotated shadow, searching I found a great solution to this, but when I try to apply this to a simple image all the wrapper element get the shadow, I know that I’ve to use a selector, but I can’t get it working.
This’s the example that I want to achieve:
Link to example

What I tried:
I select the image, that is inside one column and I set a custom css class to shadow

Then always with the image selected I add a custom css

.shadow{
    position: relative; /* or absolute */
}

.shadow:after
{
    content: "";
    position: absolute;
    top: -1px;
    left: -5px;
    right: -5px;
    bottom: -1px;
    background: #555;
  	z-index: -1;
  
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.45); 
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.45);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}

This’s applied to all wrapper
https://i.ibb.co/smPKnCF/ex.png

Every attempt that I made don’t show me any shadow and I don’t know what I’m doing wrong, this’s the last code that I tried:

selector .shadow img {
    position: relative; /* or absolute */
}

selector .shadow img:after
{
    content: "";
    position: absolute;
    top: -1px;
    left: -5px;
    right: -5px;
    bottom: -1px;
    background: #555;
  	z-index: -1;
  
  -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.45); 
box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.45);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}

Sorry but I don’t have any live site is only local and not on my pc.

Anyone have some idea about that?

J