directional-hover

Add a directional css hover effect

Usage no npm install needed!

<script type="module">
  import directionalHover from 'https://cdn.skypack.dev/directional-hover';
</script>

README

Directional Hover Effect

CircleCI Status npm npm npm


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