How can I lazy-load images inside cards with a blur-up effect using utilities?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I lazy-load images inside cards with a blur-up effect using utilities?

Asked on Aug 26, 2025

Answer

To lazy-load images with a blur-up effect in Bootstrap 5, you can use the `loading="lazy"` attribute along with CSS for the blur effect. This approach enhances performance by loading images only when they are about to enter the viewport.

<!-- BEGIN COPY / PASTE -->
        <div class="card" style="width: 18rem;">
            <img src="low-res-image.jpg" class="card-img-top blur" alt="..." loading="lazy">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>

        <style>
            .blur {
                filter: blur(10px);
                transition: filter 0.3s;
            }
            .blur-loaded {
                filter: blur(0);
            }
        </style>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const img = document.querySelector('.card-img-top');
                img.onload = () => img.classList.add('blur-loaded');
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `loading="lazy"` attribute to defer loading of off-screen images.
The `.blur` class applies an initial blur effect to the image.
The `.blur-loaded` class removes the blur once the image is fully loaded.
The JavaScript snippet listens for the image's `onload` event to transition the blur effect.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I lazy-load images inside cards with a blur-up effect using utilities?

Asked on Aug 26, 2025

Answer

The Q&A Network