I've been working on a map project that involves changing the color of multiple areas upon hovering using CSS. I've set up the main div with position:relative, and positioned the images inside absolutely to create hover effects by transitioning opacity from 0 to 1.
However, I'm facing an issue where I can't figure out how to apply the same CSS styling to multiple linked elements (the islands) for hover effects. When trying to mouse over one of these linked elements, the desired hover effect doesn't work as expected.
If anyone could provide assistance in resolving this issue, it would be greatly appreciated.
HTML
<div class="container">
<div id="main">
<img class="africa" src="./img/map/africa.png" height="50"/>
<img class="centralamerica" src="./img/map/centralamerica.png" height="50"/>
<img class="southamerica" src="./img/map/southamerica.png" height="50"/>
<img class="asiapacific" src="./img/map/asiapacific.png" height="50"/>
<a id="islandlink" href="#islandlink">
<img class="caribean" src="./img/map/caribean.png" height="50"/>
<img class="madagascar" src="./img/map/madagascar.png" height="50"/>
<img class="pacific" src="./img/map/pacific.png" height="50"/></a>
</div>
</div>
CSS
.container {
background-image: url(../img/map/map.png);
}
#main{
background-image: url(../img/map/map.png);
background-size: 960px 560px;
background-repeat: no-repeat;
width:960px;
height:560px;
position:relative;
}
#main img.africa {
top: 248px;
left: 405.59px;
height: 35.5%;
position: absolute;
width: 18%;
opacity:0;
}
#main img.southamerica {
top: 316px;
left: 240px;
height: 35%;
position: absolute;
width: 13.5%;
opacity:0;
}
#main img.centralamerica {
top: 256px;
left: 158px;
height: 12.7%;
position: absolute;
width: 10.8%;
opacity:0;
}
#main img.asiapacific {
top: 188px;
left: 584.5px;
height: 49%;
position: absolute;
opacity:0;
}
#main img.africa:hover {
top: 248px;
left: 405.59px;
height: 35.5%;
position: absolute;
width: 18%;
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
#main img.southamerica:hover {
top: 316px;
left: 240px;
height: 35%;
position: absolute;
width: 13.5%;
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
#main img.centralamerica:hover {
top: 256px;
left: 158px;
height: 12.7%;
position: absolute;
width: 10.8%;
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
#main img.asiapacific:hover {
top: 188px;
left: 584.5px;
height: 49%;
position: absolute;
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
<!--Islands-->
#islandlink {
top: 316px;
left: 240px;
height: 35%;
position: relative;
width: 13.5%;
opacity:1;
}
#islandlink img.caribean {
top: 288px;
left: 251px;
height: 3.3%;
position: absolute;
opacity:0;
}
#islandlink img.madagascar {
top: 376px;
left: 548px;
height: 6.5%;
position: absolute;
opacity:0;
}
#islandlink img.pacific {
top: 346px;
left: 816px;
height: 5%;
position: absolute;
opacity:0;
}
#islandlink img:hover {
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
}