I am working on a project where I have a full-width div with a background image containing people. I want to display a tooltip when hovering over each person, but I am facing challenges in aligning the divs properly.
Image maps with % widths do not seem to be feasible for this task, so I am experimenting with using DIVs instead. Here is an example of what I have tried:
<div class="homepageimage">
<div class='artistmap' id='davidmap'></div>
<div class='artistmap' id='ceceliamap'></div>
<div class='artistmap' id='erinmap'></div>
<div class='artistmap' id='aimap'></div>
<div class='artistmap' id='tommap'></div>
</div>
Here is the CSS code snippet that accompanies it:
.homepageimage{
width:100%;
max-width:2000px;
height:750px;
margin:auto;
margin-top:-50px;
background: url({{ 'homepage_test2.jpg' | asset_url }});
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
clear:both;
overflow:hidden;
}
.artistmap{
height:100%;
border:2px solid red;
float:left;
}
.artistmap:hover{
content:attr(title);
}
#davidmap{
width:10%;
}
#ceceliamap{
width:15%;
}
#erinmap{
width:5%;
}
#aimap{
width:5%;
}
#tommap{
width:10%;
}
I have realized that depending on the screen size, the alignment of the divs may be off. What is the most effective way to address this issue?
You can view the code I mentioned above live at .
Your insights and suggestions would be greatly appreciated. Thank you!