Image

This is an image design template.

Basic

HTML

<pucture class="image">
  <source srcset="/img/project/noknow_web_design/beach_1.webp" type="image/webp">
  <img src="/img/project/noknow_web_design/beach_1.png" alt="" loading="lazy">
</picture>

Image with link

data-animation="scale": Scale up on hover.

HTML

<a class="image-link" data-animation="scale" href="">
  <picture>
    <source srcset="/img/project/noknow_web_design/beach_1.webp" type="image/webp">
    <img src="/img/project/noknow_web_design/beach_1.png" alt="" loading="lazy">
  </picture>
</a>

Install

npm

Console

> npm i @noknow/web-design-horizontal-image

Import

CSS

@import '/YOUR_PROJECT/node_modules/@noknow/web-design-image/style.css';