overlay-image v1.1.0

Overlay Image component for Vue

Demo: https://mattiasahlsen.github.io/overlay-image

Install and import

npm install overlay-image or yarn add overlay-image

<script>
import OverlayImage from 'overlay-image'
...

export default {
...
  components: {
    ...
    OverlayImage,
  }
...
}
</script>

Usage

Single box (300px height)

<template>
  ...
  <OverlayImage
    :image="require('../assets/my-image.jpg')"
    text="Overlay text"
    @click="$router.push('/link-to')"
    :height="300"
    containerClass="overlay-container overflow-hidden"
    :overlayClass="['overlay', 'p-1']"
    :textClass="{ 'text-gray-200': greyText }"
  >
  ...
</template>

In a grid (using tailwind.css)

<template>
  ...
  <div class="grid md:grid-cols-2 grid-cols-1">
    <OverlayImage
      v-for="(link, index) in links"
      :key="index"

      :image="require(`../assets/${link.image}`)"
      :text="link.text"
      @click="$router.push(link.to)"
    />
  </div>
  ...
</template>

<script>
export default {
  ...
  data() {
    return {
      ...
      links: [
        {
          image: 'link1.jpg',
          text: 'Link 1',
          to: '/link1',
        },
        {
          image: 'link2.jpg',
          text: 'Link 2',
          to: '/link2',
        },
        ...
      ]
    }
  }
}
</script>

Props and event handlers