How to Create an Image Overlay Bundle in Drupal

Alaa Haddad, professional Drupal developer based in Austin, TX

1:11 PM CDT, Wed September 16, 2026

This video produces an image that reveals a title on hover, using one of seven overlay effects and no JavaScript at all.

One paragraph type, one decision

paragraph_bundle_image_overlay adds a single type, Image Overlay. You supply a Title, an Image, and optionally an Image Link with an Image Link Title for the title attribute. The only bundle-specific setting is the Image Overlay select on the Display tab.

The seven effects

Image Overlay Fade
Image Overlay Zoom
Image Overlay Title
Image Overlay Slide Top
Image Overlay Slide Bottom
Image Overlay Slide Left
Image Overlay Slide Right

All seven are stylesheet effects. The sub-module ships one CSS file and no JavaScript directory, which is why the overlay costs nothing in front-end weight and cannot break when a script fails to load.

The image comes from media

The Image field does not take a file upload. It references the suite's own media type, Image (PB), which carries the image and a caption field — so the same picture can be reused in a card, a slideshow and an overlay without three uploads. Enabling this sub-module therefore enables Paragraph Bundle Image too.

A difference from the other bundles

Its Display tab is deliberately shorter. There is no background, text or border hover colour here, because the hover state belongs to the overlay effect itself; a link hover colour is still available.

Requirements

Drupal 11.3 or 12, plus core Media Library and Link. Details and the full bundle list are on the Paragraphs Bundles module page.

Would rather have this configured for you? That is Drupal development — or get in touch.

Paragraphs Bundles

Our mission is to make Drupal more accessible and user-friendly, empowering businesses of all sizes, especially small enterprises with powerful tools that streamline content customization and enhance digital experiences.

Need help with your Drupal project? Hire Me through Flash Web Center, LLC.

Inspiration

Inspiration is the fuel that powers our creative engine, often coming from our surroundings, experiences, or the works of others. It's that magical moment when something clicks inside your brain, and you suddenly see a path forward that you hadn't noticed before. Inspiration can strike at any time, providing the motivation and energy needed to explore new possibilities and bring your ideas to life.

Unique Ideas

Unique Ideas

Unique ideas are the seeds of innovation, representing original thoughts or concepts that stand out from the usual. They're the sparks that ignite the process of creating something new and different, often leading to unexpected and groundbreaking solutions or products. Whether in art, science, business, or technology, unique ideas challenge the status quo and pave the way for progress.

Brainstorming

Brainstorming

Brainstorming is a creative group activity designed to generate a large number of ideas or solutions to a problem. It's a free-flowing and open-ended discussion where every suggestion is welcomed and considered, no matter how outlandish it may seem. Brainstorming encourages thinking outside the box, fostering an environment where creativity and collaboration lead to innovative solutions.

Planning

Planning

Planning is the blueprint for turning your ideas into reality. It involves setting goals, outlining steps, and organizing resources in a way that makes achieving your objectives possible. Good planning considers potential challenges and opportunities, making it easier to navigate the journey from concept to completion. It's about preparing the groundwork so that your projects can grow and flourish.

Drupal Developer

A Drupal Developer stands as the technical powerhouse behind dynamic websites, wielding expertise in PHP, custom module development, and Drupal's sophisticated API ecosystem. This role transforms business requirements into functional, secure, and scalable web solutions that power everything from small business sites to enterprise platforms serving millions of users. A Drupal Developer's expertise spans the entire development lifecycle—from architecting custom modules and integrating third-party services to optimizing performance and ensuring security compliance. Discover the complete guide to Drupal Developer skills, career paths, and hiring strategies.

Drupal Themer

A Drupal Themer serves as the artistic craftsperson who transforms wireframes and design mockups into pixel-perfect, accessible, and responsive user experiences using Twig templates, CSS, and JavaScript. This specialized role bridges the gap between design vision and technical implementation, ensuring every website not only looks exceptional but performs flawlessly across all devices and meets WCAG accessibility standards. A Drupal Themer's work encompasses the entire front-end ecosystem—from creating custom theme architectures and optimizing Core Web Vitals to implementing complex responsive designs and ensuring seamless integration with Drupal's rendering system. Explore the comprehensive guide to Drupal Themer expertise, theming best practices, and career advancement.

Drupal Architect

A Drupal Architect emerges as the strategic visionary of web construction, armed with encyclopedic knowledge of enterprise architecture patterns, infrastructure design, and Drupal's extensive technological ecosystem. This senior role operates at the highest technical level, making critical decisions that determine whether complex implementations scale successfully or collapse under real-world demands. A Drupal Architect's responsibilities begin long before development starts—during strategic planning phases where the foundation for secure, performant, and maintainable systems is established through careful evaluation of technology stacks, integration strategies, and scalability requirements. Learn about Drupal Architect skills, enterprise architecture strategies, and career progression to principal roles.

Copyright © 2026 Flash Web Center, LLC - All rights reserved

Developed & Designed by Alaa Haddad