kinda stuck in using scale() property while hovering image - html

Question

I have this image which is inside div with class="image-wrapper". All I am trying to do is:
display .image-wrapper::before while being hovered on image so it works like title of image
also use transform: scale(1.1) on img so it grows little on being hovered
Description of problem from my side
In order to display title inside image (part 1), using ::before, we cannot use it directly on img as they are replaced elements, so I enclosed img with div with class="image-wrapper" and used ::before on div. And it worked fine as I expected. Now for the second part, I am not able to render both property same time. I am kinda confused.
.image-wrapper {
border: 2px solid black;
display: inline-block;
overflow: hidden;
}
.image-wrapper::before {
content: 'Hello';
height: auto;
width: auto;
padding: 4px;
margin-left: 8px;
background: rgba(0, 0, 240, 0.3);
color: white;
font-size: 20px;
position: absolute;
opacity: 0;
}
img {
width: 100%;
}
img:hover {
transform: scale(1.1);
transition: all 0.2s;
cursor: pointer;
}
/*HERE IS THE PROBLEM*/
.image-wrapper:hover::before {
opacity: 1;
}
<div class="image-wrapper">
<img src="https://images.unsplash.com/photo-1624215824600-ed3118b76873?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDMwfDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
</div>

Answer 1

It's kind of all there in your code, but the before pseudo element wont show up above its element, unless you give it a higher z-index.
Also this snippet slightly alters the CSS so that what it's looking for is hover on the image-wrapper class both for the Hello and the img scaling.
.image-wrapper {
display: inline-block;
overflow: hidden;
}
.image-wrapper::before {
content: 'Hello';
height: auto;
width: auto;
padding: 4px;
background: pink margin-left: 8px;
background: rgba(0, 0, 240, 0.3);
color: white;
font-size: 20px;
position: absolute;
opacity: 0;
}
img {
width: 100%;
}
.image-wrapper:hover img {
transform: scale(1.1);
transition: all 0.2s;
cursor: pointer;
}
.image-wrapper:hover::before {
opacity: 1;
z-index: 100;
}
<div class="image-wrapper">
<img src="https://images.unsplash.com/photo-1624215824600-ed3118b76873?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDMwfDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
</div>