Streaming live at 10am (PST)

Rotation on Mouseover does not work through mask( image, svg)


#1

Hi, Rotation on Mouseover does not work through mask( image, svg)
Is it possible to solve it in some way?
https://preview.webflow.com/preview/deniss-beautiful-project-39ddd1?preview=542aaf841d54c49872a370b43108c8c5


#2

It’s possible that what’s considered on top by HTML is the SVG. So if you put the interaction on the image, the :hover never registers because it’s below the SVG. Order counts for :hover. only the element on top gets the :hover.

So you can affect the interaction to the SVG but set the interaction so that it affects another element, the image. You could also use a dummy element in the form of an invisible div that you make sure is on top of the SVG, and set the IX to affect the image.

Edit in your case you’re setting a :hover trigger on an element that has z-index:1 and that is covered by a element with z-index:2. The latter steals the :hover.


#3

Thanks, it all worked ! :grinning:


#4

I don’t know what you try to do but it’s a fun effect!


#5

and the other way around with the mask not moving but the image moving


#6

Vincent, thank you for your interest , I want to make a series of such effects for my site , minimum content, maximum effects :smile:


#7

Very interesting.

I’ve not mentioned that you’re using enormous images for your tests, you may want to use smaller, more optimized images at some point.

You can also explore with a bit of custom code, using blending modes. If you add the code in a custom code Embed widget within the page, you’ll see the effects right in the designer.

http://sab.webflow.io/blend-modes