directional-hover

Directional Hover Effect

Add a directional css hover effect

Live example here

Installation

$ npm install directional-hover
//or
$ yarn add directional-hover

Importing

import Direction from "directional-hover"

Quick use

<div class="thumbs">
  <div class="item">
    <img src="https://picsum.photos/350/300" />
  </div>
</div>

import Direction from "directional-hover"
 
new Direction({ 
  $els: document.querySelectorAll(".item") 
})

.item are the containers. they handle the perspective property. Containers first childs (here .item img) will have the class added for transformation and animation