CSS hover to show text

Question

My hover is on the image but how can I make the text stay shown until I move mouse outside the container not the image?? and how can I make the text appear from under the image, "z-index" is not working

.hover-image:hover + .info {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

you can see what I mean here: https://jsfiddle.net/wb5f4muj/

Answer 1

You need position not static in order z-index to work

z-index: -1;
position: relative;

EDIT: in order to have text hoverable as well, you need to wrap the hover image and text with the div and add hover styles to it.

In that case hover will happen on both image and text.