Streaming live at 10am (PST)

Add element trigger to box shadow

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)

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)";
});

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

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

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