Author: | GA-MO |
---|---|
Views Total: | 212 views |
Official Page: | Go to website |
Last Update: | April 6, 2023 |
License: | MIT |
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);