Responsive Image Overlay Cards

Leverage Bootstrap's native image overlay cards to create responsive featured panels that can be placed anywhere on your website.

Create a <section> or <div> with a .featured-panel class. Add a .responsive-{x} class (x equals the breakpoint size hook, e.g. md) to determine the size at which the .card-img-overlay loses its absolute position, and appears below the image (for small viewport widths).

Background Color and Image Opacity

The direct child of .featured-panel is a .card with a background color. The image within the card uses on of our preset opacity classes (found in scss/_e-supplementary-classes.scss) under C. Opacities. In the example above, the image has a 40% opacity, with the .opacity-40 class.

With the opacity class present, the background color set on the card shows through the image. Add a .full-opacity-on-device class to the image with an opacity class, and the image will show at 100% opacity when the image and text become stacked (on mobile).

                                

                                    <section class="featured-panel device-md">

                                        <div class="card bg-primary">
                                            <img class="card-img opacity-40 full-opacity-on-device"
                                                src="https://via.placeholder.com/1500x750" alt="Card image">
                                            <div class="card-img-overlay d-flex">
                                                <div class="container align-self-center">
                                                    <div class="narrow text-white text-center">
                                                        <h1 class="card-title display-4 font-weight-bold mb-3">
                                                            Lorem ipsum dolor sit amet consectetur.
                                                        </h1>
                                                        <a href="#" class="btn btn-lg btn-info" title="Button Link">Button Link</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </section>

                                
                            

Adding Gradient Overlays

While gradient overlay classes can be used anywhere, it is often logical to apply them to featured panel images.

In the above example, a horizontal white gradient is applied over the image. Because a .responsive-lg class is present, the gradient will be hidden when the viewport's width is less than the large breakpoint.

                                
                                    <section class="featured-panel device-lg" dir="ltr">
                                        <div class="card bg-white">
                                            <div class="overlay-gradient-x-white">
                                                <img class="card-img" src="./images/feature/brooklyn-heights-walk.jpg" alt="Card image">
                                            </div>
                                            <div class="card-img-overlay d-flex px-0">
                                                <div class="container align-self-center px-0">
                                                    <div class="row no-gutters">
                                                        <div class="col-lg-6">
                                                            <div class="card bg-white">
                                                                <div class="card-body">
                                                                    <h2 class="card-title text-primary">Card Title</h2>
                                                                    <p class="card-text">
                                                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Error minima id
                                                                        quibusdam molestiae.
                                                                    </p>
                                                                </div>
                                                                <div class="card-footer">
                                                                    <a href="#" class="btn btn-lg btn-primary text-crimson" title="Button Link">Button Link</a>
                                                                </div>
                                                            </div>
                                                            <!-- .card -->
                                                        </div>
                                                        <!-- .col -->
                                                    </div>
                                                    <!-- .row -->
                                                </div>
                                                <!-- .container -->
                                            </div>
                                            <!-- .card-img-overlay -->
                                        </div>
                                        <!-- .card -->
                                    </section>
                                    <!-- .featured-panel -->
                                
                            

For further customization, the featured panel SCSS is available in scss/_f-layout-elements.scss under F. Featured panels.