JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt>
    <div class="centeredText">text</div>
</div>

CSS

#container {
    display: inline-flex;
    position: relative;
    cursor: pointer;
}

.centeredText {
    display: none;
}

#container:hover > .centeredText {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 4em;
    color: white;
}