JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <img src="https://unsplash.it/1280/600/?random" alt="background"/>
    <div>
        <h2>Lorem ipsum</h2>
        <p>This could be your content</p>  
    </div>
</div>

CSS

div.container {
    position: relative;
    width: 50%;
    height: auto;
    margin: 20px auto;
    border: 2px solid silver;
    line-height: 0;
    -moz-box-shadow: 0 0 10px silver;
    -webkit-box-shadow: 0 0 10px silver;
    box-shadow: 0 0 10px silver;
}

div.container img {
    width: 100%;
}

div.container div {
    display:none;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    line-height: 1.2em;
}


div.container:hover div {
    display: block;
}

div.container div * {
    margin: 10px;
}