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 on React components - lightweight/zero dependencies (3kB)

React Tilt

👀 Easily apply tilt hover effect on React components

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,...) 🔗demo
• Event tracking for component values 📐 (tilt, glare, mousemove,...) 🔗demo
• Many effects that can be easily applied:
  • Scale on hover 🔗demo
  • Disable x/y axis 🔗demo
  • Flip component vertically/horizontally 🔗demo
  • Window tilt hover effect 🔗demo
  • Manual tilt control 🕹 (joystick, slider etc.) 🔗demo
  • Parallax effect on overlaid images 🔗demo

Example

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

…

View on GitHub

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