Let's say I have a image and I want a text to appear when I hover the image.

Question

When I hover the image there will appear a text in the middle of it. I guess I should use somehow :hover and ::after or ::before with content:"text"; but ...I am not sure how to do that.

An example or a link to more informations about that would be useful. 😀

Answer 1

.container {
width: 150px;
height: 150px;
background-image: url("youimage");
}
.container::before {
content: "Hello";
position: absolute;
top: 75px;
left: 75px;
}
.container:hover::before {
content: "";
}

Answer 2

Pseodo element cannot work with img tag, use div with background instead

https://code.sololearn.com/Wm0K55tIJ57v/?ref=app