Add element trigger to box shadow

Design help Animations & Interactions
1

Is there a way to add an element trigger (mouse hover animation) on a div block that targets a text link box shadow?

Here is my public share link: LINK
(how to access public share link)

2

hi @adam1 you can achieve this kind of operation with JS while using getComputedStyle and then rewrite it when hover over other element.

here is simple example.

const box = document.querySelector(".black-box");
// click on box will overwrite filter setting
box.addEventListener("click", () => {
  const text = document.querySelector(".my-heading");
  let comuptedStyleFilter = getComputedStyle(text).filter;
  text.style.filter = "drop-shadow(rgba(255, 0, 0, 0.8) 12px 12px 15px)";
});
1 Like
3

Hi @adam1 if you don’t have further question related to this topic feel free to close your request as solved.

4

Thanks for this. So to be clear, there is no way to do this in Webflow interaction, only via javascript?

5

Hi @adam1 while assign an interaction to shadow while hover over other element is something that WF doesn’t offer. Yes, you can use JS to achieve this effect

1 Like