JSFiddle - React, Tailwind, and code Playground

HTML

<div id="con">
    <div id="box1">
        <p id="text1"> <a href="url">DESTINATIONS</a>

        </p>
        <p id="text2"> <a href="url">AMALFI<BR/>SORRENTO<BR/>POSITANO</a>

        </p>
        <p id="text3">
<a href="url">THINGS TO DO</a>

        </p>
        </p>
        <p id="text4"> <a href="url">TOURS<BR/>MUSUEMS<BR/>SHOPPING</a>

        </p>
    </div>

CSS

#con {
width:1024px;
height:670px;
background-color: #161717;
}


#box1 {
float: left;
font-size: 25px;
width: 388px;
height: 477px;
position:relative;
background-image: url(media/trying1.png);
background-size: cover;
margin-left: 120px;
margin-top: 90px;
}

#box1:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:black;
    opacity:0;
    z-index:0;
    
}


#box1:hover:before{
 opacity:.6;   
 transition: all 0.5s;
}

/* Move the contents of the div above the :before overlay */
#box1 > *{
    position:relative;
    z-index:1;
}


#text1 {
z-index:100;
color:white;
font-size:30px;
text-align: center; 
margin-top:80px;
line-height:55px;
opacity: 0;
transition: all 0.5s;
}
#box1:hover #text1 {
opacity: 1;
}