BMED • MAMMOTHMURALS Hover Card Effects

Video Example of the hover card effect

If you’ve ever landed on Mammoth Murals ↗, you probably noticed their strong visual identity—bold typography, subtle animations, and this artsy vibe that feels alive. I wanted to capture a piece of that energy and bring it into a reusable React component.

So in this tutorial, we’re going to build the MammothMuralsCard: a highly customizable card component powered by React + TailwindCSS, perfect for showcasing artwork, portfolio pieces, or even blog posts.

Inspiration

The inspiration came directly from the MammothMurals landing page. Their style leans into artistic yet modern aesthetics:

Bold serif titles.
Subtle hover interactions (zoom, color shifts).
Minimal use of shapes but maximum emphasis on playful details (like animated dots).

I wanted to recreate that energy in a component you can drop into any project.

The Component: MammothMuralsCard

Here’s the full React + Tailwind implementation:

Breaking It Down

Wrapper

The parent <div> handles overflow and applies group so we can target hover states on children.

Animated Dots

Instead of borders, I used 4 little dots positioned on the corners. On hover, they scale inward creating a pseudo-frame effect.

Image Effects

When hovered:

Zooms in (scale-110)
Gets sepia + hue-rotation + contrast tweaks → artsy filter effect

Infos

Title + author/year info stacked on the bottom with bold typography. I gave the author/year labels tag-like styles to stand out.

Usage Example

Use Cases

Portfolio Sites Showcase projects or artwork.
Blog Previews Turn featured posts into stylish cards.
E-commerce Display product cards with hover interactions.
Landing Pages Bring that artistic vibe to hero or gallery sections.

Prop	Type	Description
title	`string`	The main title text displayed on the card (e.g., artwork name, blog title).
author	`string`	The author/creator’s name displayed in a styled tag.
year	`string`	The year (or any short label) displayed next to the author tag.
image	`string`	URL or path to the image displayed inside the card.
customStyle	`object`	Optional overrides for styling each section of the card.
├─ wrapper	`string`	Custom classes for the outermost wrapper `<div>`
├─ dotsCustomStyle	`string`	Overrides the default yellow dots on the corners (color/size/styles).
├─ imageStyle	`string`	Custom classes for the `<img>` element (e.g., rounded corners, shadows).
├─ imageWrapperStyle	`string`	Custom classes for the image wrapper container.
├─ infosWrapper	`string`	Custom classes for the text container (title + author/year).
├─ titleStyle	`string`	Custom classes for the title text (font, size, color).
├─ authorStyle	`string`	Custom classes for the author tag.
├─ yearStyle	`string`	Custom classes for the year tag.

Conclusion

The MammothMuralsCard is more than just a React + Tailwind component — it’s a reusable, customizable building block inspired by the bold and artistic identity of Mammoth Murals ↗. Whether you’re building a portfolio, blog, or landing page, this card adds a playful but modern vibe that stands out.

You can check out the full source code and live examples on my GitHub repository

And of course, if you want to see where the inspiration came from, head over to the official Mammoth Murals website ↗.