3D Interactive Hover Effect – GHover.js

Preview:

Description:

GHover.js is a JavaScript library to create 3D interactive hover effects for image galleries and product showcases. Built with CSS 3D transforms and interact with mouse movement.

How to use it:

1. Install & download.

# NPM
$ npm i ghover

2. Import the GHover.js.

<script src="/path/to/ghover.js"></script>

3. Add multiple layers into the hover area.

<div class="box-hover">
  <div class="box">
    <img src="1.jpg" alt="g-hover" />
    <div class="box-title">
      <div class="title">CSSScript</div>
      <div class="sub-title">3D Interactive Hover Effect - GHover.js</div>
    </div>
  </div>
</div>

4. Set up the GHover.js.

const dataHover = [
      {
        selector: '.box-hover',
        children: [
          {
            className: '.box',
            rotate: { x: -5, y: -5, z: 0 },
            transition: 'all 0.2s ease',
          },
          {
            className: '.border',
            translate: { x: 20, y: 20, z: 0 },
            transition: 'all 0.2s ease',
          },
          {
            className: '.title, .sub-title',
            rotate: { x: -10, y: -10, z: 3 },
            translate: { x: 30, y: 30, z: 0 },
            transition: 'all 0.2s ease',
          }
        ]
      },
      // more instances here
];

5. Start the hover effect.

GHover(dataHover);