An Alpine.js directive that provides a smooth image popout (zoom) effect with overlay.
npm install @designbycode/alpine-popout
x-popout will enlarge it into the center of the screen with a darkened background overlay.
x-popout
bash
npm install @designbycode/alpine-popout
``
Then register it in your Alpine setup:
`js
import Alpine from 'alpinejs'
import Popout from '@designbycode/alpine-popout'
Alpine.plugin(Popout)
Alpine.start()
`
Or include it via a
---
Usage
Apply the x-popout directive to any element.
$3
`html
x-popout
src="/thumbnail.jpg"
alt="Example Image"
class="rounded-md"
/>
`
Clicking this image will open it in a popout view with default settings.
---
$3
You can pass an Alpine expression with configuration options:
`html
x-popout="{
margin: 40,
background: 'rgba(0,0,0,0.85)',
duration: 400,
easing: 'ease-in-out',
largeSrc: '/high-res.jpg'
}"
src="/thumbnail.jpg"
alt="Zoomable Image"
class="rounded-lg"
/>
`
---
Options
| Option | Type | Default | Description |
| ------------ | -------- | ------------------------- | ------------------------------------------ |
| margin | number | 24 | Space around the image from viewport edges |
| background | string | rgba(0,0,0,0.75) | Overlay background color |
| duration | number | 300 (ms) | Animation duration in milliseconds |
| easing | string | cubic-bezier(0.2,0,0,1) | CSS easing function |
| largeSrc | string | null | Optional high-resolution image URL |
---
Example Markup
`html
x-popout="{ largeSrc: '/large-photo3.jpg', margin: 50 }"
src="/thumb3.jpg"
alt="Photo 3"
class="rounded-md"
/>
``