Html – Make text appear on hover

csshoverhtmltext

So I need the text to appear on hover over the image (it doesnt have to be a link if that is too difficult)

html

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

css

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

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

}

Best Solution

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

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

#text1{
    opacity: 0;
    transition: all 0.5s;
}
#box1:hover #text1{
    opacity: 1;
}
<div id="con">
<div id="box1">
<p id="text1">
<a href="url">DESTINATION</a>SS
</p>
</div>