Hover texts for separate positions on a single photo

user_18877186 0
Viewed 37

enter image description here

I'm trying to give the user a small description of the people in a photo when they over each person (Hover text not like a tooltip). Can someone please help me with this? I tried using area map but can't seem to implement it here. I'm very new to this. Thank you

bootstrap-4 css html
2 Answers

For a responsive solution you could measure the position of each face and the width and height of the overall image and then get CSS to position a transparent, hoverable element over each face.

For this snippet I just used a (physical) ruler on your photo as it is not vital to have pixel-perfect accuracy.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  --imgW: 21.5;
  --imgH: 10.5;
  width: 100vw;
  height: calc(100vw * (var(--imgH) / var(--imgW)));
  background-image: url(https://i.stack.imgur.com/G1uWk.png);
  background-size: 100% auto;
  position: relative;
}

.container> :nth-child(n) {
  position: absolute;
  left: calc(100% * var(--left) / var(--imgW));
  top: calc(100% * var(--top) / var(--imgH));
  background-color: transparent;
  width: calc(100% * (var(--right) - var(--left)) / var(--imgW));
  height: calc(100% * (var(--bottom) - var(--top)) / var(--imgH));
  z-index: 1;
}

.container> :nth-child(1) {
  --left: 4.5;
  --right: 6.75;
  --top: 2.25;
  --bottom: 4.5;
}

.container> :nth-child(2) {
  --left: 10.75;
  --right: 13.25;
  --top: 3;
  --bottom: 5.5;
}

.container> :nth-child(n)> :first-child {
  display: none;
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  padding: 1vw;
  overflow: auto;
}

.container> :nth-child(n):hover> :first-child {
  display: block;
}
<div class="container">
  <div>
    <div>Person 1</div>
  </div>
  <div>
    <div>Person 2</div>
  </div>
</div>

user_108674540

you can refer to w3schools image map https://www.w3schools.com/html/html_images_imagemap.asp

I tried to create a hover on coffee by adding text inside map and setting visibility to visible on hover you can refer the below code. I think You have to position the text manually.

<!DOCTYPE html>
<html>
<body>
<style>
.coffee-text{
visibility:hidden;
}
.coffee:hover .coffee-text{
visibility:visible;
}
</style>

<h2>Image Maps</h2>

<img src="https://www.w3schools.com/html/workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap" class='coffee' >
  <area shape="circle" coords="337,300,44" href="coffee.htm" ><span class='coffee-text'>Coffee</span>
</map>

  

</body>
</html>

user_161162020
Related