Streaming live at 10am (PST)

Image hover linked to CMS

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

^ 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!

1 Like

one way you can do it is by using jquery.

1- Start by placing this code in your head, on page settings.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2- Place an image in your collection item and make it get that image from which ever field you want the image to be from.

3- Give the image a class of collection-image (can be whatever but just for example).

4- Then make a page triggered, mouse move in viewport interaction. Make sure you have the collection image selected, create a new animation, set 0% in X axis to -50vw and 100% to 50vw, then for the Y axis 0% = -50vh and 100%=50vh.

5- set the collection list to position relative.

6- Set the collection image to position absolute. with 0% on top and 50% on the left. right and bottom should be ‘auto’.

7- Give a class to whatever you want to hover to show the image, make sure its something that is in the collection item, eg a heading like in your example. Make sure it is a sibling of the collection image. In this example i’ll use the class “hover-this”.

8 -Then add an embed to the collection item and paste this code:

<style>
.collection-image {
transition: opacity 0.2s 0.2s;
opacity:0%;
pointer-events:none;
} 
</style> 


<script>
$(document).ready(function(){

$(".hover-this").on("mouseover", function () {
$(this).siblings(".collection-image", this).css("opacity","100%");
});

$(".hover-this").on("mouseout", function () {
$(this).siblings(".collection-image", this).css("opacity","0%");
});


});
</script>

Hopefully it helps

1 Like

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. :sunglasses:

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.

1 Like

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.

2 Likes

Quick example, cloning CJHersh’s project and switching out hard coded links for a CMS Collection List:

https://cms-motion-hover-effect.webflow.io

preview:
https://preview.webflow.com/preview/cms-motion-hover-effect?utm_medium=preview_link&ut[…]ffect&preview=0cb80a56c6e599d548e65b00638c5641&mode=preview ?

4 Likes

@mattgi incredible - this is perfect. thanks so much!