html - 使文本出现在悬停时

Question

所以我需要在鼠标悬停在图像上时显示文本(如果这太难，则不必是链接)

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;

}

Answer 1

#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>