I am facing a challenge with styling an image that is contained within a div with the class "image-wrapper". Here's what I'm attempting to achieve:
- Show the content of ".image-wrapper::before" when hovering over the image to act as a title for the image
- Apply the CSS property "transform: scale(1.1)" on the image so that it slightly enlarges when hovered over
My Description of the Issue
To display a title inside the image (part 1) using "::before", I couldn't apply it directly to the "img" tag because they are replaced elements. So, I wrapped the "img" in a "div" with class "image-wrapper" and used "::before" on the "div", which worked as expected. However, I'm struggling to implement both properties simultaneously for the second part. It's quite confusing for me.
.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>