Show Text on Hover-CodePudding

So pretty much I want to show text on what each of these images are when I hover over it. When you hover over it it should blur the image so you can see the text better. I am pretty new to html and couldn't figure this out on my own. -----------------------------------------------------------------------------------------------------------------------------

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url('../Images/three.png') ;
    width:100%;d
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    background-position: 0% 100%; 
}

.coatofarms {
    width: 5%;
    z-index: 15;
    position: absolute;
    left: 0.5%;
    top: -2%;
    transition: all .1s ease-in-out;
}

.coatofarms:hover {
    top: -1%;
    transform: scale(1.0);
}

.topnav {
  overflow: hidden;
  background-color: #e1bc85;
  position:absolute;
  top: 0%;
  width: 100%;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
  margin-left: 10%;
  font-family: Bodoni Mt;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #3a5063;
  color: white;
}




table {
    background-color:#3a5063;
    width:100%;
    position: absolute;
    height: 1.5%;
    top: 6.5%;
}



a.link:link {color:#000000;text-decoration:none;}
a.link:visited {color:#000000;text-decoration:none;}
a.link:hover {text-decoration:none;}


.giza {
transition: all .1s ease-in-out;
position: absolute;
top: 12%;
left:1%;
border-radius: 40%;
}

.giza:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}

/*-----------------------------------------*/

.luxor {
transition: all .1s ease-in-out;
position: absolute;
top: 16.2%;
left: 40%;
border-radius: 40%;
}

.luxor:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}

/*-----------------------------------------*/

.siwalandmark {
transition: all .1s ease-in-out;
position: absolute;
top: 10.4%;
right: 1%;
border-radius: 40%;
}

.siwalandmark:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}

/*-----------------------------------------*/

.abu {
transition: all .1s ease-in-out;
position: absolute;
right: 1%;
top: 56%;
border-radius: 40%;
}

.abu:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease
}

/*-----------------------------------------*/

.abydos {
transition: all .1s ease-in-out;
position: absolute;
top: 65%;
left: 40%;
border-radius: 40%;
}

.abydos:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}

/*-----------------------------------------*/

.whitedesert {
transition: all .1s ease-in-out;
position: absolute;
top: 62%;
left: 1%;
border-radius: 40%;
}

.whitedesert:hover {
box-shadow: 0 0 0 10px #000000;
transition: .5s ease;
}

<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landmarks</title>
<link rel="icon" href="Images/flag.png">
  <link rel="stylesheet" href="CSS/landmarks.css">
</head>
<body>
 <a href="index.html"><div ><img src="Images/coabetter.png"  width="75px" z-index="2"></div></a>
<div >
  <a href="food.html">Food</a>
  <a href="landmarks.html" >Landmarks</a>
  <a href="#visit">Visit Us</a>
  
</div>

<img src="Images/giza.jpg" width="25%"  >

<img src="Images/luxorstemple.jpg" width="25%"  >

<img src="Images/siwa.png" width="25%" >

<img src="Images/abu.jpg" alt="simbel" width="25%"  >

<img src="Images/abydos.jpeg" width="25%" >

<img src="Images/whitedesert.jpg" width="25%" >
<!--Table-->
<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

</body>


</html>

CodePudding user response：

There are several ways of doing it and you can do this clearly in pure CSS and HTML without Javascript.

First: blur image: (as seen in example in both images) there is a CSS filter method filter: blur(5px);

That's it. Just as simple as that.

Second: add text with a Tooltip (as seen in the snippet on the first image)

You can just add the attribute title="tooltip text" and HTML includes a tooltip for you automatically with the text of the attribute. Hover with your cursor and wait a little

Third: make div with text visible on hover (as seen in snippet in second image)

you have to wrap the image and div tag into a sourrounding container and add CSS to it. So when you hover the container then you simply set the text-div to visible

.container {
  position: relative;
  text-align: center;
  color: white;
  width: 25%;
}
.blur_and_tooltop:hover {
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: hidden;
}

.container:hover .blur_and_visibility {
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

.container:hover .text-box {
  visibility: visible;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <img src="https://picsum.photos/id/1/200" alt="blur_and_tooltop" width="25%"
        title="Just a normal HTML5 tooltip. No CSS needed" >
    <div >
        <img src="https://picsum.photos/id/15/200" alt="advanced pure CSS and HTML" width="100%" >
        <div >
            <h3>I am some fancy TEXT</h3>
        </div>
    </div>
</body>
</html>

CodePudding user response：

There's a few different ways of doing this through things like CSS, javascript/jQuery, or utilizing built in functions of a third party extension such as Bootstrap. The quickest would be to show the title attribute on hover.

Example HTML

<img src="https://cdn.theatlantic.com/media/mt/science/cat_caviar.jpg" title="Cat Caviar" />