JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<body>
    <div class="imageHolder">
        <img src="picture1.jpeg">	<span class="note">Hello!</span>

    </div>
</body>

CSS

.imageHolder {
    position: relative;
    top:300px;
    left: 300px;
    width: 300px;
    height: 250px;
    text-align: center;
    overflow: hidden;
    background-color: black;
}
.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    font-size: 24px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    -webkit-backface-visibility: hidden; 
}
img {
    width: 300;
    opacity: 1;
    height: 250px;
}
.imageHolder:hover .note {
    opacity: 1;
}