Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
lib
public
scripts
src
.gitignore
.npmignore
README.md
package.json
yarn.lock

README.md

Demo

This project is inspired by the hover effect seen on Codrop.

This module contains 6 samples of the tilt hover (Check the demo).

Install

npm install --save tilt-hover

Props

  1. className: string
    Purpose: To modify the size of the card

  2. backgroundClassName: string
    Purpose: To change the image background (using css)

  3. glassClassName: string
    Purpose: To change the gradient background (using css)

  4. captionClassName: string
    Purpose: To modify the container div of the title and subtitle

  5. rectangleClassName: string
    Purpose: The rectangle inside the card is a svg. Use this prop to add a class that modifies the svg attributes like stroke, fill, ...

  6. titleClassName: string
    Purpose: To add style to the card's title

  7. desciptionClassName: string
    Purpose: To add style to the card's description

  8. title: string
    The title of the card

  9. description: string
    The description of the card

Example

// App.js
import React, { Component } from 'react';
import {TiltHover1} from 'tilt-hover';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <TiltHover1
          backgroundClassName={'background'}
          glassClassName={'glass'}
          captionClassName={'caption'}
          title={'Creativity'}
          descriptionClassName={'description'}
          description={'NEVER STOP'}
          className={'tilter card1'} />
      </div>
    );
  }
}
export default App;
/* App.css */
h1 {
  font-family: 'Abril Fatface', serif;
  font-size: 2.5em;
  letter-spacing: 2px;
}

.app {
  padding: 200px;
}


.description {
  font-size: 0.85em;
  letter-spacing: 0.15em;
  margin-top: 1em;
  font-weight: 200;
  font-family: 'Roboto','Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
}

.tilter {
  margin-right: 3em;
  margin-bottom: 3em;
}

.card1 .background {
  background-image: url(https://images.unsplash.com/photo-1479231233972-e184fe70398e?dpr=1&auto=format&fit=crop&w=1199&h=793&q=80&cs=tinysrgb&crop=);
  background-position: center center;
}
.card1 .glass {
  background-image: linear-gradient(45deg, rgba(32,30,29,0.78) 0%, rgba(95,94,78,0.44) 54%, rgba(250,250,250,0.32) 100%);
}
.card1 .caption {
  padding: 3em;
}
You can’t perform that action at this time.