Search code examples
reactjsanimationframer-motion

`whileHover` effect works when mouse enters but effect persists after mouse leaves (React, Framer Motion)

I'm trying to make some images glow from the outside when the mouse hovers over them using the filter: drop-shadow() effect. Currently the shadow is applied when I hover my mouse over the image, but it remains after the mouse leaves. Also the transition prop must somehow not be recognized as the shadow immediately appears (as though it has no duration). I did have this set up using initial, animate and transition just to understand framer motion and the duration worked fine in that instance.

here is my code below

            <motion.img
                whileHover={{filter: 'drop-shadow(0 0 0.75rem rgb(255,255,255)', transition: {duration: 2}}}
                id='logo' src={g} 
                style={{width: '20%', height: '20%', position: 'relative', left: '103px'}}
            >
            </motion.img>

Any help appreciated!

Solution

  • I think there's two problems.

    1. You should close drop-shadow.
    • as is
    whileHover={{filter: 'drop-shadow(0 0 0.75rem rgb(255,255,255)', transition: {duration: 2}}}
    • to-be
    whileHover={{filter: 'drop-shadow(0 0 0.75rem rgb(255,255,255))', transition: {duration: 2}}}
    1. If option 1 doesn't work, add initial filter property like below.
    initial={{ filter: 'drop-shadow(0 0 0rem rgba(255,255,255,0))' }}

    I hope it helps.