Transition

Create smooth transitions between two states when hovering an element.

Usage

To toggle a transition on hover or focus, add the .uk-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 .uk-transition-* classes to any child element to apply the actual effect.

Class Description
.uk-transition-fade Lets the element fade in
.uk-transition-scale-up
.uk-transition-scale-down
The element scales up or down.
.uk-transition-slide-top
.uk-transition-slide-bottom
.uk-transition-slide-left
.uk-transition-slide-right
Lets the element slide in from the top
.uk-transition-slide-top-small
.uk-transition-slide-bottom-small
.uk-transition-slide-left-small
.uk-transition-slide-right-small
The element slides in from the top, bottom, left or right with a smaller distance.
.uk-transition-slide-top-medium
.uk-transition-slide-bottom-medium
.uk-transition-slide-left-medium
.uk-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="uk-transition-toggle" tabindex="0">
    <div class="uk-transition-fade"></div>
</div>
  • Image removed.

    Fade

    Fade

    Image removed.

    Bottom

    Bottom

    Image removed.

    Icon

    Image removed.Image removed.

    2 Images

    Image removed.

    Scale Up Image

    Image removed.

    Headline

    Subheadline

    Small Top + Bottom

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