JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.box {
    width:200px;
    height:200px;
    background-color:aqua;
    position: relative;
     overflow: hidden;
}
.caption {
    width:200px;
    color:white;
    background-color:black;
    left: 0;
	z-index: 2;
    top:100%;
    margin-top:-30px;
    position: absolute;
}

.box:hover .caption {
    margin-top:-116px;
}