mn-image

a image component with 3d perspective on hover/focus.

Usage no npm install needed!

<script type="module">
  import mnImage from 'https://cdn.skypack.dev/mn-image';
</script>

README

npm version Dependency Status MIT Licence

mn-image

A image component with 3d perspective on hover/focus.

See the demo

preview demo

Install

npm install --save mn-image

And bundle dependencies and main files in dist/ with your preferred tool.

Or just download the main files, located in dist/

Usage

And then, in your html, you can use the tag mn-image i.e.

<mn-image src="path/to/an/image"></mn-image>

3d perspective

If you want a 3d perspective on mouse over, or focus (both only for desktop) just put the component inside a tag a

<a href="#">
  <mn-image src="path/to/an/image"></mn-image>
</a>

And if you want more, the following attributes from image are supported in this component