Containing image in div container and transition properties not working - css

Question

I'm using Elementor Pro and wanted certain images to zoom within the div container and had a shine on them when hovering, so upon asking for help someone wrote this code for me, but it didn't scale the image. I added the transform property to scale it, but I don't know how to keep it within the container. I also wanted the transition to be smooth so I also added the transition property which doesn't seem to work at all. This is my first time asking asking a question here and I do not have a coding background so I apologize if I say something wrong.
.shine-test::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: all 0.6s;
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0);
}
.shine-test:hover::before {
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0);
}
.shine-test:hover {
transition-timing-function: ease-in-out;
transition-duration: .6s;
}
.shine-test:hover {
transform: scale(1.2)
}

Answer 1

You need JavaScript if you want to change the size of the wrapper, because things changed by scale keeps their original 'box'.
Although if you knew the size you were scaling it to you can do something like this:
Box = 40*40
Scale 1.5 = Box width 60*60
.box {
width: 40px;
height: 40px;
}
.box.scaled {
width: 60px;
height: 60px;
}
.box.scaled > .shine-test {
transform: scale(1.5);
}