How to give hover effect to specific part of image? - html

Question

For a project, I am trying to hover background colour change effect to specific part of image. Suppose I have this image
Now I want that when I hover over the orange on the right side I the background glow should change. Similarly I can do it for the other items in the image.
I could not find any property where I can specify coordinates of the image where hover effect can be applied to.
Is there any way this is possible? Any pre processing through photoshop or some software that might help?
edit: by background glow I mean using drop-shadow(16px 16px 20px red);property

Answer 1

I've made you an example with just the right-most orange, but you get the idea. just place SVGs and give each a unique class name (for size/position).
You can use an online tool, such as this, to create your SVG shapes.
A thing to keep in mind is if the image resizes, the position & size of the highlights should remain correct (this is why working with percentages is best)
.imageWrapper {
width: 500px;
position: relative;
}
.imageWrapper img {
width:100%; height:100%;
object-fit: contain;
}
.image-area {
position: absolute;
top: 69.5%; /* position should be in percentages */
left: 73.5%; /* position should be in percentages */
transition: .4s;
mix-blend-mode: lighten; /* work the best with the default black fill of svg shapes */
cursor: pointer;
}
.image-area:hover {
filter: drop-shadow(0 0 20px gold);
}
.image-area--orange-1 {
/* sizes should be in percentages */
width: 21%;
height: 18%;
}
<div class='imageWrapper'>
<!-- fill with SVG areas -->
<svg viewBox="0 0 100 100" class='image-area image-area--orange-1'>
<circle cx="50" cy="50" r="50"/>
</svg>
<!-- -->
<img src="https://i.stack.imgur.com/8BVo6.jpg"/>
</div>

Answer 2

Please consider using the image region mapping, this should be standard for most browser and don't need image manipulation
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map

Answer 3

const circleClip = document.querySelector("#bg");
function removeIntro() {
circleClip.classList.remove("intro");
}
function circleMove(e) {
removeIntro();
circleClip.style.setProperty("--x", e.clientX + "px");
circleClip.style.setProperty("--y", e.clientY + "px");
}
document.addEventListener("mousemove", circleMove);
circleClip.addEventListener("touchmove", (e) => {
removeIntro();
let touch = e.touches[0];
e.preventDefault();
circleClip.style.setProperty("--x", touch.clientX + "px");
circleClip.style.setProperty("--y", touch.clientY + "px");
});
:root {
--x: 0px;
--y: 0px;
}
body {
position: relative;
margin: 0;
overflow: hidden;
background-image: url(https://i.stack.imgur.com/8BVo6.jpg);
background-size: 100% 35%;
backdrop-filter: grayscale(100%);
}
#bg {
position: relative;
background: url(https://i.stack.imgur.com/8BVo6.jpg) no-repeat;
background-size: 100% 35%;
min-height: 300vh;
clip-path: circle(10% at var(--x) var(--y));
}
#bg.intro {
clip-path: circle(100% at 50% 50%);
animation: circleIntro 1800ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
#keyframes circleIntro {
100% {
clip-path: circle(10% at 50% 50%);
}
}
<div id="bg" class="intro"></div>