Create a Card component with React and styled-components

https://codesandbox.io/s/nameless-worker-z31nt

Added the tilt effect to cards by react-parallax-tilt

mkosir / react-parallax-tilt

👀 Easily apply tilt hover effect to React components - lightweight/zero dependencies 3kB

React Tilt

👀 Easily apply tilt hover effects to React components

Live Demo 💥

Install

npm install react-parallax-tilt

Features

• Lightweight 3kB, zero dependencies 📦
• Tree-shakable 🌳 ESM and CommonJS support
• Works with React v15 onwards
• Supports mouse and touch events
• Support for device tilting (gyroscope)
• Glare effect 🌟 with custom props (color, position, etc.) 🔗demo
• Event tracking for component values 📐 (tilt, glare, mousemove, etc.) 🔗demo
• Multiple built-in effects:
  • Scale on hover 🔗demo
  • Disable x/y axis 🔗demo
  • Flip component vertically/horizontally 🔗demo
  • Window tilt hover effect 🔗demo
  • Manual tilt control 🕹 (via joystick, slider, etc.) 🔗demo
  • Parallax effect for overlaid images 🔗demo

Example

import Tilt from 'react-parallax-tilt';
const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt 👀</h1>
      </div>

…

View on GitHub

https://codesandbox.io/embed/nameless-worker-z31nt?fontsize=14&hidenavigation=1&theme=dark