Urgent help! - custom code + css

Hi guys! Im struggling to get my site to work correctly with projects hover css -

Here is the example im trying to replicate:

(Live Site) – https://motion-hover-effect.webflow.io/
(Read Only) – Webflow - Motion Hover Effect

Here is my site im trying to get the above example to work:

(Read Only) http:// Webflow - Fabric
(WIP) https://fabric-4acd03.webflow.io/

Any help or suggestions would be greatly appreciated! :slight_smile:

Hi @Cameron_Will,

You’ll just need to change the (.grid) to (.grid-2) to match your div class name, you can replace your Before </body> tag code with this and it should work on republish:


<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dbb8d3a0d3f7fa83cc_three.min.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dab8d3a0a088fa83c8_TweenLite.min.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11daf8881a5af4531765_Math.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dac28723d0da3279a6_EffectShell.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11dadd5f83040460b5ed_RGBShiftEffect.txt"></script>
<script src="https://uploads-ssl.webflow.com/5dae0e06b8d3a0d097fa5f9e/5dae11f6c287237662327a19_imagesloaded.pkgd.txt"></script>

<script>
	const container = document.body
	const itemsWrapper = document.querySelector('.grid-2')
    // Preload images
    const preloadImages = () => {
        return new Promise((resolve, reject) => {
            imagesLoaded(document.querySelectorAll('img'), resolve);
        });
    };
    // And then..
    preloadImages().then(() => {
        // Remove the loader
        document.body.classList.remove('loading');
        const effect = new RGBShiftEffect(container, itemsWrapper, { strength: 0.25 })
	});
</script>
2 Likes