Card with glow effect on hover

1
const Wrapper = styled(motion.div, {
2
  position: 'relative',
3
  width: '300px',
4
  height: '120px',
5
});
6

7
const Glow = styled(motion.div, {
8
  background: 'linear-gradient(90deg, #ffa0ae 0%, #aacaef 75%)',
9
  position: 'absolute',
10
  top: '0',
11
  left: '0',
12
  width: '100%',
13
  height: '100%',
14
  WebkitFilter: 'blur(15px)',
15
  filter: 'blur(15px)',
16
  borderRadius: '16px',
17
});
18

19
const Card = styled(motion.div, {
20
  borderRadius: '16px',
21
  marginBottom: '0px',
22
  overflow: 'hidden',
23
  position: 'relative',
24
  background: 'rgba(255, 255, 255, 0.65)',
25
  position: 'relative',
26
  padding: '36px 24px',
27
  height: '100%',
28
  div: {
29
    color: '#4a4a4c',
30
    display: 'flex',
31
    justifyContent: 'center',
32
    alignItems: 'center',
33
    height: '50px',
34
  },
35
});
36

37
const CardWithGlow = () => {
38
  const cardVariants = {
39
    hover: {
40
      scale: 1.05,
41
    },
42
    initial: {
43
      scale: 1,
44
    },
45
  };
46

47
  const glowVariants = {
48
    hover: {
49
      opacity: 0.8,
50
    },
51
    initial: {
52
      scale: 1.05,
53
      opacity: 0,
54
    },
55
  };
56

57
  return (
58
    <Wrapper initial="initial" whileHover="hover">
59
      <Glow
60
        variants={glowVariants}
61
        transition={{
62
          ease: 'easeOut',
63
          delay: 0.15,
64
        }}
65
      />
66
      <Card
67
        variants={cardVariants}
68
        transition={{
69
          ease: 'easeOut',
70
          delay: 0.15,
71
          duration: 0.5,
72
        }}
73
      >
74
        <div>✨ Hover me ✨</div>
75
      </Card>
76
    </Wrapper>
77
  );
78
};
79

80
render(<CardWithGlow />);