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.
Sorry @Nick, I missed your comment. @Matt site is currently live - logomark.co - will you still need read-only link?
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
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 here you go!
https://www.loom.com/share/e40c999ee50e4d27a90464ea500355cc?sid=d4b0ae82-5acc-456c-9ba8-f7b5f5bc7e89
Thank you! Probably a silly question but does that now exist somewhere that I can just copy and paste haha
@Dillon 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.
@Dillon 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;
}