JSFiddle - React, Tailwind, and code Playground

by Getulio Ferreira

HTML

<div id="background">
<p class="content__text">Texto</p>
</div>

CSS

#background {
        position: relative;
        margin: 0 auto;
        width: 626px;
        height: 626px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items:center;
        background: url("https://image.freepik.com/free-vector/coloured-summer-background_1048-2276.jpg") no-repeat left top;
    }
    #background:hover::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: 
          linear-gradient(
           to bottom,
           rgba(0,0,0,0),
           rgba(0,0,0,1)
          );
        opacity: 1;
    }
 .content__text {
   color: #fff;
   z-index: 999;
   font-size: 40px;
 }