Hoverable JS

Table of content

• Examples
• JS API

Usage

Use this component to move an oversized element withing its parent bounds.

app.js

import { Base, createApp } from '@studiometa/js-toolkit';
import { Hoverable } from '@studiometa/ui';

class App extends Base {
  static config = {
    name: 'App',
    components: {
      Hoverable,
    },
  };
}

export default createApp(App);

index.html

<div data-component="Hoverable" class="relative w-96 h-96">
  <div data-ref="target" class="absolute w-[120%] h-[120%]">
    ...
  </div>
</div>