Skip to main content

Images

Hover effects and other image styles.

Opacity

Flatlay photography of wireless headphones
                
                    <figure class="img-opacity">
                        <img src="..." alt="..." class="img-fluid">
                    </figure>
                
            

Overlay

Project Title

2020
                
                    <figure class="img-overlay mb-0">
                        <img src="assets/img/cat.jpg" alt="" class="img-fluid">
                        <figcaption class="img-hover">
                            <p class="h4 mb-2">Project Title</p>
                            <span>2020</span>
                        </figcaption>
                    </figure>
                
            

Scale

A decorative lettering
                
                    <figure class="img-scale">
                        <div class="img-wrap">
                            <img src="..." alt="..." class="img-fluid">
                        </div>
                    </figure>
                
            

Text

Logo Design

Art Design

                
                    <div class="img-text position-relative">
                        <div class="img-bg" style="background-image: url('...')"></div>
                        <div class="text pt-lg-3">
                            <div class="small text-dark text-uppercase mb-2">Logo Design</div>
                            <hr role="presentation" class="border-primary sep text-left ml-0 my-2">
                            <h2 class="text-dark mb-0">Art Design</h2>
                        </div>
                    </div>
                
            

Thumbnail

                
                    <a href="#">
                        <img src="..." alt="..." class="img-fluid img-thumbnail mb-2">
                    </a>
                
            

Bootstrap DocumentationExternal link