Overlay

Ready Added in 2.0.0

Create an image overlay, which comes in different styles.

Usage

Add the .gls-overlay class to an element following an image to create the overlay panel. To create a position context, add the .gls-inline class from the Utility component to a container element around both. Finally, add one of the .gls-position-* classes from the Position component to align the overlay.

<div class="gls-inline">
    <img src="" width="" height="" alt="">
    <div class="gls-overlay gls-position-bottom"></div>
</div>

Note Add the .gls-light or .gls-dark class, so that elements will be optimized for better visibility on dark or light images.

  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="gls-inline">
        <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" alt="">
        <div class="gls-overlay gls-light gls-position-bottom">
            <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    

Style modifiers

By default, the overlay has padding, but no additional styling. Add one of these modifier classes to add a background color to the overlay.

Default

For a simple background color, add the .gls-overlay-default class.

  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="gls-child-width-1-2@m" gls-grid>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay gls-overlay-default gls-position-bottom">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay-default gls-position-cover"></div>
                <div class="gls-overlay gls-position-bottom gls-dark">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
    </div>
    

Primary

For a prominent background color, add the .gls-overlay-primary class.

  • Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <div class="gls-child-width-1-2@m" gls-grid>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay gls-overlay-primary gls-position-bottom">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay-primary gls-position-cover"></div>
                <div class="gls-overlay gls-position-bottom gls-light">
                    <p>Default Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>
    
        </div>
    </div>
    

Gradient

Add a gentle gradient overlay.

Default

For a simple background gradient, add the .gls-overlay-default-gradient-* class, replacing the asterisk with a direction.

  • <div class="gls-child-width-1-2@m" gls-grid>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay-default-gradient-top gls-position-cover"></div>
            </div>
    
        </div>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay-default-gradient-bottom gls-position-cover"></div>
            </div>
    
        </div>
    </div>
    

Primary

For a prominent background gradient, add the .gls-overlay-primary-gradient-* class, replacing the asterisk with a direction.

  • <div class="gls-child-width-1-2@m" gls-grid>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay-primary-gradient-left gls-position-cover"></div>
            </div>
    
        </div>
        <div>
    
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay-primary-gradient-right gls-position-cover"></div>
            </div>
    
        </div>
    </div>
    

Overlay icon

To display an overlay icon, add the gls-overlay-icon attribute to a <span> element inside the overlay.

<div class="gls-position-center">
    <span gls-overlay-icon></span>
</div>
  • <div class="gls-child-width-1-2@m" gls-grid>
        <div>
    
            <div class="gls-inline gls-light">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
                <div class="gls-position-center">
                    <span gls-overlay-icon></span>
                </div>
            </div>
    
        </div>
        <div>
    
            <div class="gls-inline gls-dark">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay-default gls-position-cover">
                    <div class="gls-position-center">
                        <span gls-overlay-icon></span>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    

Position

Add one of the .gls-position-* classes from the Position component to align the overlay.

<div class="gls-overlay gls-position-top"></div>
  • Top

    Center

  • <div class="gls-child-width-1-2@m" gls-grid>
        <div>
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay gls-overlay-default gls-position-top">
                    <p>Top</p>
                </div>
            </div>
        </div>
        <div>
            <div class="gls-inline">
                <img src="https://utahhealthcare.github.io/gloss-docs/images/photo.jpg" width="1800" height="1200" alt="">
                <div class="gls-overlay gls-overlay-default gls-position-center">
                    <p>Center</p>
                </div>
            </div>
        </div>
    </div>