Making a tilt-on-hover effect in React JS without CSS

In this article, we will see how to add a tilt-on-hover effect in React.js without using CSS. We are going to add tilt animation effect on the <div> element. This type of effect can immediately attract user's attention, as it will tilt a specific part on hovering while keeping the other elements at their original place.

Example

First download the react-parallax-tilt package −

npm i --save react-parallax-tilt

This library is used to import the <Tilt> container which will add tilt effect to any element.

Add the following lines of code in App.js −

import Tilt from "react-parallax-tilt";

function App() {
   return (
      <Tilt>
         <div style={{ height: "300px", backgroundColor: "darkgreen"}}>
            <h1>React Parallax Tilt</h1>
         </div>
      </Tilt>
   );
}

export default App;

We can use the <Tilt> object to add a tilt effect on any element, whether it is card or div. and even button or list.

Output

On execution, it will produce the following output −