Trying to figure out how to show additional content when a photo is hovered over without shifting the rest of the page's content placement? Looking for alternative solutions rather than using margin-top: -22%.
Here's a link to the website in question:
<!Doctype html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="MyHomePage.css">
</head>
<body>
<img class="cnetheader" src="cnetheader.png" alt="cnetheader" height="100%" width="100%">
<img class="searchBar" src="searchBar.png" alt="cnetheader" height="100%" width="50%">
<img class="eCommerce" src="eCommerce.png" alt="cnetheader" height="100%" width="92%">
<img class="freelancer" src="freelancer.png" alt="cnetheader" height="100%" width="100%">
<img class="photoHeader" src="photoHeader.png" alt="cnetheader" height="100%" width="100%">
<img src="photos2.png" width="100%" height="100%" border="0" usemap="#map" />
<map name="map">
<div class="photo1">
<area shape="rect" coords="63,13,451,260" href="https://www.google.com" />
<div class="photo1-content">
Only visible on hover
</div>
</div>
<div class="photo2">
<area shape="rect" coords="481,13,870,258" href="https://www.google.com" />
<div class="photo2-content">
Only visible on hover
</div>
</div>
<div class="photo3">
<area shape="rect" coords="900,12,1290,258" href="https://www.google.com" />
<div class="photo3-content">
Only visible on hover
</div>
</div>
<div class="photo4">
<area shape="rect" coords="60,300,450,545" href="https://www.google.com" />
<div class="photo4-content">
Only visible on hover
</div>
</div>
<div class="photo5">
<area shape="rect" coords="483,301,870,545" href="https://www.google.com" />
<div class="photo5-content">
Only visible on hover
</div>
</div>
<div class="photo6">
<area shape="rect" coords="899,300,1288,545" href="https://www.google.com" />
<div class="photo6-content">
Only visible on hover
</div>
</div>
</map>
<img class="enterprise" src="enterprise.png" alt="cnetheader" height="100%" width="100%">
</body>
</html>
.eCommerce{
margin-left: 7%;
}
.photo1-content{
display: none;
}
.photo1:hover .photo1-content{
display: block;
margin-top: -22%;
margin-left: 13%;
}
.photo2-content{
display: none;
}
.photo2:hover .photo2-content{
display: block;
margin-top: -22%;
margin-left: 44%;
}
.photo3-content{
display: none;
}
.photo3:hover .photo3-content{
display: block;
margin-top: -22%;
margin-left: 75%;
}
.photo4-content{
display: none;
}
.photo4:hover .photo4-content{
display: block;
margin-top: -1%;
margin-left: 13%;
}
.photo5-content{
display: none;
}
.photo5:hover .photo5-content{
display: block;
margin-top: -1%;
margin-left: 44%;
}
.photo6-content{
display: none;
}
.photo6:hover .photo6-content{
display: block;
margin-top: -1%;
margin-left: 75%;
}
.enterprise{
position: static;
}