Question 49422 in Photoshop Question posted in
The official user guide can be found here.

How to give hover effect to specific part of image? – Photoshop

For a project, I am trying to hover background colour change effect to specific part of image. Suppose I have this image

enter image description here

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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0 
    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>
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search