PHPackages                             tinusg/filament-hover-image-column - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. tinusg/filament-hover-image-column

ActiveLibrary[Image & Media](/categories/media)

tinusg/filament-hover-image-column
==================================

A Filament table column that shows a larger image preview on hover

v1.0.0(3mo ago)81.9k↑96.3%MITPHP ^8.2

Since Apr 16Compare

[ Source](https://github.com/tinusg/filament-hover-image-column)[ Packagist](https://packagist.org/packages/tinusg/filament-hover-image-column)[ Docs](https://github.com/tinusg/filament-hover-image-column)[ RSS](/packages/tinusg-filament-hover-image-column/feed)WikiDiscussions Synced 3w ago

READMEChangelogDependencies (5)Versions (2)Used By (0)

Filament Hover Image Column
===========================

[](#filament-hover-image-column)

A Filament table column that displays a larger image preview card on hover. Drop-in replacement for `ImageColumn` — all existing methods work unchanged.

[![Preview](https://raw.githubusercontent.com/tinusg/filament-hover-image-column/main/art/preview.gif)](https://raw.githubusercontent.com/tinusg/filament-hover-image-column/main/art/preview.gif)

Installation
------------

[](#installation)

```
composer require tinusg/filament-hover-image-column
```

No service provider or configuration needed.

Usage
-----

[](#usage)

Replace `ImageColumn` with `HoverImageColumn`:

```
use TinusG\FilamentHoverImageColumn\HoverImageColumn;

HoverImageColumn::make('avatar')
    ->circular()
```

Hovering over the thumbnail shows a larger preview in a floating card that follows the cursor.

### Custom preview size

[](#custom-preview-size)

```
HoverImageColumn::make('photo')
    ->previewSize(400) // both width and height

HoverImageColumn::make('photo')
    ->previewSize(width: 500, height: 300) // separate dimensions
```

### Custom preview URL

[](#custom-preview-url)

Show a higher-resolution image in the preview while keeping a small thumbnail:

```
HoverImageColumn::make('thumbnail_url')
    ->previewUrl(fn ($record) => $record->full_resolution_url)
```

### Disable preview

[](#disable-preview)

```
HoverImageColumn::make('photo')
    ->preview(false)
```

### Use with computed state

[](#use-with-computed-state)

```
HoverImageColumn::make('media.source_url')
    ->label('Image')
    ->circular()
    ->state(fn ($record) => $record->media->where('is_primary', true)->first()?->display_url)
```

API
---

[](#api)

MethodDescriptionDefault`previewSize(width, height?)`Max dimensions of the preview image`320px``previewUrl(string|Closure)`Custom URL for the preview (e.g. high-res version)Same as thumbnail`preview(bool|Closure)`Enable or disable the hover preview`true`All `ImageColumn` methods (`circular()`, `square()`, `stacked()`, `disk()`, `visibility()`, etc.) are inherited and work as expected.

How it works
------------

[](#how-it-works)

- Extends Filament's `ImageColumn` and overrides `toEmbeddedHtml()`
- Uses Alpine.js (already loaded by Filament) for hover state and cursor tracking
- Preview is rendered via `x-teleport="body"` to escape table overflow clipping
- Image is lazy-loaded — only fetched when you hover
- Viewport boundary detection prevents the preview from going off-screen
- No additional CSS or JavaScript assets required

Requirements
------------

[](#requirements)

- PHP 8.2+
- Filament 5.x

Sponsors
--------

[](#sponsors)

- This plugin is sponsored by [Vaklui](https://www.vaklui.nl).

License
-------

[](#license)

MIT License. See [LICENSE](LICENSE) for details.

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance81

Actively maintained with recent releases

Popularity27

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

99d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/2152919?v=4)[tinusg](/maintainers/tinusg)[@tinusg](https://github.com/tinusg)

---

Tags

laravelimagepreviewhoverfilamentcolumn

###  Code Quality

TestsPest

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/tinusg-filament-hover-image-column/health.svg)

```
[![Health](https://phpackages.com/badges/tinusg-filament-hover-image-column/health.svg)](https://phpackages.com/packages/tinusg-filament-hover-image-column)
```

###  Alternatives

[joshembling/image-optimizer

Optimize your Filament images before they reach your database.

113163.0k12](/packages/joshembling-image-optimizer)[solution-forest/filament-simplelightbox

This is my package filament-simplelightbox

62100.3k1](/packages/solution-forest-filament-simplelightbox)[urlbox/screenshots

Use urlbox to easily generate website thumbnail screenshots from a URL

11262.1k](/packages/urlbox-screenshots)[danihidayatx/image-optimizer

Optimize your Filament images before they reach your database. Forked from joshembling/image-optimizer for Filament v4 & v5 support.

3418.1k](/packages/danihidayatx-image-optimizer)[tomatophp/filament-media-manager

Manage your media files using spatie media library with easy to use GUI for FilamentPHP

14852.3k3](/packages/tomatophp-filament-media-manager)[al-saloul/filament-image-gallery

A Filament plugin for displaying image galleries with zoom, rotate, and flip capabilities

4521.5k](/packages/al-saloul-filament-image-gallery)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)