When working with image mapping, I encountered an issue where changing the width and height of the image caused some drawing issues. Specifically, when hovering over certain circles that were drawn on the image, hover-content1 was supposed to appear.
After struggling with image mapping, I attempted using CSS and jQuery to achieve the desired effect by toggling the opacity of hover-content1 between 0 and 1 on hover and mouseout events. However, this approach also did not yield the desired result.
Can anyone provide suggestions on how to achieve this effect using CSS or jQuery?
/* CSS code snippet */
.headset-image{
width: 100%;
margin: 0 auto;
padding: 200px;
}
.headset-image img {
position: relative;
width: 50%;
height: auto;
}
.hover-wrapper {
/* position: relative; */
}
.hover-wrapper .hover-content1,
.hover-wrapper .hover-content2,
.hover-wrapper .hover-content3,
.hover-wrapper .hover-content4 {
display: flex;
width: 10%;
flex-direction: column;
text-align: justify;
}
h4.hover-head-content {
margin: 0;
padding: 2px 4px 5px;
font-size: 10px;
font-weight: bold;
}
p.hover-para-content {
margin: 0;
padding: 4px;
font-size: 12px;
line-height: 1.40;
}
.hover-content1 {
position: absolute;
top: 15%;
left: 13%;
padding: 5px;
opacity: 1;
color: #ffffff;
background: rgba(0,0,0,0.5);
}
... /* additional CSS rules */
<!-- HTML markup -->
<div class="section-image">
<div class="headset-image">
<img src="https://preview.ibb.co/iVKhMm/headset.jpg" class="headphone" alt="">
</div>
<!-- hover-effect-1 -->
<div class="hover-wrapper">
<div class="loading-content1">
<div class="loading-circles">
<div class="circle hold"></div>
<div class="circle first"></div>
<div class="circle"></div>
</div>
</div>
<div class="hover-content1">
<h4 class="hover-head-content">ACOUSTIC NOISE CANCELLING</h4>
<p class="hover-para-content">
More than 40 years of noise-cancelling obsession makes quiet sound quieter and music sound better.
</p>
</div>
</div>
... <!-- repeat for other hover effects -->
</div>
</div>