d
.image-container {
position: relative;
display: inline-block; /* or block depending on your layout */
}
.image-container img {
width: 100%;
height: auto;
}
.hotspot {
position: absolute;
width: 20px; /* size of the hotspot */
height: 20px;
background-color: red; /* just for visibility, you can use a custom style */
border-radius: 50%; /* makes it circular */
opacity: 0.5;
/* Adjust these values to position your hotspot */
top: 50%; /* vertical position */
left: 50%; /* horizontal position */
/* Optional: Add some transition for a nice hover effect */
transition: opacity 0.3s;
}
.hotspot:hover {
opacity: 1;
}