How to give hover effect to specific part of image?

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

Could you describe a bit more what 'background glow'' means here? Is it the orange that will change shade a bit, or everything else, or just the wall....? — A Haworth
– A Haworth, Commented Jul 18, 2022 at 11:13
@vsync made edit for explaining what I mean by background glow — alex deralu
– alex deralu, Commented Jul 18, 2022 at 11:52

vsync · Accepted Answer · 2022-07-19 09:03:45Z

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.sstatic.net/8BVo6.jpg"/>
</div>

vsync · Accepted Answer · 2022-07-18 11:16:58Z

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

edited Jul 18, 2022 at 11:16

vsync

133k61 gold badges345 silver badges430 bronze badges

answered Jul 18, 2022 at 10:48

Jaay

2,1411 gold badge17 silver badges34 bronze badges

1 Comment

vsync Over a year ago

Wow I completely forgot about it. Last time I've used it was in 2005!

zakk616 · Accepted Answer · 2022-07-18 11:44:34Z

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.sstatic.net/8BVo6.jpg);
        background-size:  100% 35%;
        backdrop-filter: grayscale(100%);
      }
      #bg {
        position: relative;
        background: url(https://i.sstatic.net/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>

Collectives™ on Stack Overflow

How to give hover effect to specific part of image?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related