Hey everyone, I’m trying to plan out a site and the design calls for a CMS item to show an image that moves with the mouse on hover.
https://motion-hover-effect.webflow.io/version-3 https://webflow.com/website/Motion-Hover-Effect
^ I found this version, which is pretty close to what I need to do (although the warping isnt totally necessary), but it looks like they used code to call out specific images that arent fed by the CMS. Does anybody know if it’s possible to somehow do this same thing, but in a way that feeds from the cms entry? Thanks so much for your help!
Hey @Stephanie_White1! It looks CJHersh used Three.js and some custom code to create this effect, so it will require some experimentation to get it right.
To see how they implemented this, take a look at some of the custom code page settings in the share link provided.
You can also make use of CMS fields in Custom JS blocks which means you can clone CJ’s project, add a CMS Collection and then make use of the custom field (+Add Field) and replace the src attribute with the thumbnail image.
This is all super helpful - thank you all so much for such quick replies!
@mattgi I’ll probably end up going with your route since I honestly don’t have much experience with code. This seems like a pretty simple approach.
Since posting, I’ve also seen someone create a similar effect with interactions. Haven’t tested that or any of these routes yet, but surely this is enough to get me through it! Thanks again everyone! Greatly appreciated.
hey @mattgi, is this preview link still live/correct? I love this style and would like to clone, but i’m seeing an incorrect state with the hover images visible at all times.
