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>
tailwind.css)
In a grid (using<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
Name | Type | Default | Description | Required |
---|---|---|---|---|
image | String | undefined | The path to the image file. | true |
text | String | '' | The text on the overlay. | false |
height | String/Number | undefined | The height of the box. E.g. '100%' or 300 (300px). If you control the height with css, leave this undefined. |
false |
containerClass | String/Array/Object | undefined | Classes that will be applied to the container div. Same syntax as :class in vue. | false |
overlayClass | String/Array/Object | undefined | Classes that will be applied to the overlay div. Same syntax as :class in vue. | false |
textClass | String/Array/Object | undefined | Classes that will be applied to the text on the overlay. Same syntax as :class in vue. | false |
@click | Function | undefined | @click handler for the container. | false |