I am trying to design a clothing website where there are panoramic images of models wearing the clothes being sold and I want to make it so when a viewer mouse hovers over a particular garment they will see an outline appear around the image. I am new to Webflow and the only way I’ve thought of doing this was as follows:
-
First I created a div block with the normal image.
-
On top of that, I placed another div block with the same background image, except I have modified this one in photoshop to have the garment outlined.
-
Next, I created another div block with a dot in the middle, which I placed directly over the garment that will be outlined using Margin controls.
-
Finally, I created an animation that gives the outlined garment image 0% opacity by default and then brings it to 100% opacity, covering the non-outlined image, on mouse hover.
This is obviously not responsive, as the dot Div Block will shift out of the desired garment whenever the viewscreen is resized. I am wondering if anyone has any thoughts on how to fix this problem. Help is super appreciated!!!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)