Need Help with Webflow SVG Hover Transition Issues | Relume Community

Need Help with Webflow SVG Hover Transition Issues

Is anyone online that can help me with a webflow hover transition I can't seem to figure out? I don't think I've built it correctly which might be why but I have an SVG that when the user hovers on, the hover state displays a background SVG (so stacking the 2 SVGs on hover). I'd like the transition to be smoother but I don't see any options to set a transition between the two states. I have tested with increasing the size from default state and hover state and that worked but I can't set the background SVG to ease in.

18 comments

Nick L.
·
DM a project link and I can take a look at it for you.
Matt J.
·
Dillon M. Would you mind sending a read-only link?
Dillon M.
·
Sorry Nick L., I missed your comment. Matt J. site is currently live - logomark.co - will you still need read-only link?
Matt J.
·
Dillon M. yeah preferably so I can see how things are structured.
Matt J.
·
dang what a wild domain, nice snag
🙌1
Dillon M.
·
Just messaged you the link.
Dillon M.
·
Thank you! It's to work with it's sister site openmark.co (not a relume build).
Matt J.
·
amazing!
Matt J.
·
the short answer to your problem is that there is no way to transition between just the img src changing, which is effectively what you are doing. If you set this up just a little different, you can get the same effect, but with finer control
Matt J.
·
I'll do a quick video to get you started as it doesn't appear you need a full walk through of how to do this but just a little push
Dillon M.
·
Thank you! That'd be really appreciated.
Matt J.
·
Dillon M. here you go! https://www.loom.com/share/e40c999ee50e4d27a90464ea500355cc?sid=d4b0ae82-5acc-456c-9ba8-f7b5f5bc7e89
👌1
Dillon M.
·
Thank you! Probably a silly question but does that now exist somewhere that I can just copy and paste haha
Matt J.
·
Ha, naw unfortunately webflow limits what I can do there
👍1
Dillon M.
·
No worries. Appreciate the video and the other tips.
Matt J.
·
No problem - keep up the amazing work!
Nick L.
·
Dillon M. DM me if you still need a hand. If you want to add me as a guest I could try and get this working for you.
Matt J.
·
Dillon M. I dont know why I went the most complicated way first but if you can define a fixed width/height of the divs - you could just create a div, and put the SVG as a background, and on hover swap to the hover SVG and then use some simple css like this in the global styles embed:
.divname { transition: background-image .2s ease-in-out; }