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

CodePudding user response：

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

CodePudding user response：

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" ></div>

CodePudding user response：

The other answers mention image mapping and I assume that's why answer is getting downvoted. But I stand by this solution as this method provides him to give minute control over the silhouette like effect he's looking for.

I would be using some absolutely positioned elements or pseudo-elements for this case.

You will need svg with shape of the objects positioned above image and show them upon hover with some opacity, thus making user feeling like you're lighting up the background.

I would suggest that the svg should be like > shape of the object kept transparent the glow area whose opacity should be toggled upon hover.

You might have to paste the inline for that and not in tag.

Wrap the image in a div and apply position relative to it.

Create multiple divs or svgs inside that div and absolutely position them where you want to be and be careful to use % for positioning. on hover make it visible.