JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="caption">
        <div class="title">THE TITLE</div>
        <p> These are words, I do not want them to show, until mouseover. When zooming out, I can see these words.</p>
    </div>
</div>

CSS

.box {
    width:200px;
    height:200px;
    background-color:aqua;
    position: relative;
}
.caption {
    width:200px;
    color:white;
    background-color:black;
    bottom:0;
    position: absolute;
}

.caption p {
    display: none;
}

.box:hover p {
    display: block;
}