<div class="uk-section uk-height-viewport uk-flex uk-flex-middle">
    <div class="uk-container uk-width-1-2@xl">


        <div class="uk-child-width-1-3@s uk-margin-medium" uk-grid>

            <div>
                <div class="uk-inline-clip uk-transition-toggle">
                    <canvas width="600" height="500" class="test-img"></canvas>
                    <div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle"><span uk-icon="ratio: 2; icon: plus"></span></div>
                </div>
                <p class="uk-margin-small-top"><i>Fade</i></p>
            </div>
            <div>
                <div class="uk-inline-clip uk-transition-toggle">
                    <canvas width="600" height="500" class="test-img"></canvas>
                    <div class="uk-transition-scale-up uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle"><span uk-icon="ratio: 2; icon: plus"></span></div>
                </div>
                <p class="uk-margin-small-top"><i>Scale</i></p>
            </div>
            <div>
                <div class="uk-inline-clip uk-transition-toggle">
                    <canvas width="600" height="500" class="test-img"></canvas>
                    <div class="uk-transition-scale-up uk-transition-slow uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle"><span uk-icon="ratio: 2; icon: plus"></span></div>
                </div>
                <p class="uk-margin-small-top"><i>Slow</i></p>
            </div>
            <div>
                <div class="uk-inline-clip uk-transition-toggle">
                    <canvas width="600" height="500" class="test-img"></canvas>
                    <div class="uk-transition-slide-bottom uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle"><span uk-icon="ratio: 2; icon: plus"></span></div>
                </div>
                <p class="uk-margin-small-top"><i>Slide bottom</i></p>
            </div>
            <div>
                <div class="uk-inline-clip uk-transition-toggle">
                    <canvas width="600" height="500" class="test-img"></canvas>
                    <div class="uk-transition-slide-bottom-small uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle"><span uk-icon="ratio: 2; icon: plus"></span></div>
                </div>
                <p class="uk-margin-small-top"><i>Small Translate</i></p>
            </div>
            <div>
                <div class="uk-inline-clip uk-transition-toggle">
                    <canvas width="600" height="500" class="test-img"></canvas>
                    <div class="uk-transition-slide-bottom-medium uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle"><span uk-icon="ratio: 2; icon: plus"></span></div>
                </div>
                <p class="uk-margin-small-top"><i>Medium Translate</i></p>
            </div>
        </div>

    </div>
</div>