Transition

Ready Added in 2.0.0

Create smooth transitions between two states when hovering an element.

Usage

To toggle a transition on hover or focus, add the .gls-transition-toggle class to a parent element. Also add tabindex="0" to make the animation focusable through keyboard navigation and on touch devices. Add one of the .gls-transition-* classes to any child element to apply the actual effect.

Class	Description
`.gls-transition-fade`	Lets the element fade in
`.gls-transition-scale-up` `.gls-transition-scale-down`	The element scales up or down.
`.gls-transition-slide-top` `.gls-transition-slide-bottom` `.gls-transition-slide-left` `.gls-transition-slide-right`	Lets the element slide in from the top
`.gls-transition-slide-top-small` `.gls-transition-slide-bottom-small` `.gls-transition-slide-left-small` `.gls-transition-slide-right-small`	The element slides in from the top, bottom, left or right with a smaller distance.
`.gls-transition-slide-top-medium` `.gls-transition-slide-bottom-medium` `.gls-transition-slide-left-medium` `.gls-transition-slide-right-medium`	The element slides in from the top, bottom, left or right with a medium distance.

This component is mostly used in combination with the Overlay component as elements are transitioned from invisible to visible state. To place the overlay on top of another element, like an image, use the Position component.

<div class="gls-transition-toggle" tabindex="0">
    <div class="gls-transition-fade"></div>
</div>

Fade

Fade

Bottom

Bottom

Icon

2 Images

Scale Up Image

Headline

Subheadline

Small Top + Bottom

<div class="gls-child-width-1-2 gls-child-width-1-3@s gls-grid-match gls-grid-small" gls-grid>
    <div class="gls-text-center">
        <div class="gls-inline-clip gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
            <div class="gls-transition-fade gls-position-cover gls-position-small gls-overlay gls-overlay-default gls-flex gls-flex-center gls-flex-middle">
                <p class="gls-h4 gls-margin-remove">Fade</p>
            </div>
        </div>
        <p class="gls-margin-small-top">Fade</p>
    </div>
    <div class="gls-text-center">
        <div class="gls-inline-clip gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
            <div class="gls-transition-slide-bottom gls-position-bottom gls-overlay gls-overlay-default">
                <p class="gls-h4 gls-margin-remove">Bottom</p>
            </div>
        </div>
        <p class="gls-margin-small-top">Bottom</p>
    </div>
    <div class="gls-text-center">
        <div class="gls-inline-clip gls-transition-toggle gls-light" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
            <div class="gls-position-center">
                <span class="gls-transition-fade" gls-icon="icon: plus; ratio: 2"></span>
            </div>
        </div>
        <p class="gls-margin-small-top">Icon</p>
    </div>
    <div class="gls-text-center">
        <div class="gls-inline-clip gls-transition-toggle" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
            <img class="gls-transition-scale-up gls-position-cover" src="https://utahhealthcare.github.io/gloss-docs/images/light.jpg" alt="">
        </div>
        <p class="gls-margin-small-top">2 Images</p>
    </div>
    <div class="gls-text-center">
        <div class="gls-inline-clip gls-transition-toggle" tabindex="0">
            <img class="gls-transition-scale-up gls-transition-opaque" src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
        </div>
        <p class="gls-margin-small-top">Scale Up Image</p>
    </div>
    <div class="gls-text-center">
        <div class="gls-inline-clip gls-transition-toggle gls-light" tabindex="0">
            <img src="https://utahhealthcare.github.io/gloss-docs/images/dark.jpg" width="1800" height="1200" alt="">
            <div class="gls-position-center">
                <div class="gls-transition-slide-top-small"><h4 class="gls-margin-remove">Headline</h4></div>
                <div class="gls-transition-slide-bottom-small"><h4 class="gls-margin-remove">Subheadline</h4></div>
            </div>
        </div>
        <p class="gls-margin-small-top">Small Top + Bottom</p>
    </div>
</div>