Your IP : 216.73.216.95

Current Path : /home/e/o/l/eolienneia/www/templates/yootheme/vendor/yootheme/styler/tests/
Upload File :
Current File : /home/e/o/l/eolienneia/www/templates/yootheme/vendor/yootheme/styler/tests/transition.html

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

            <div class="uk-grid-small uk-child-width-1-3@s uk-child-width-1-5@m uk-text-center" uk-grid>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-transition-fade uk-position-bottom uk-overlay uk-overlay-default">Overlay</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">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-position-center">
                            <div class="uk-transition-scale-up uk-overlay uk-overlay-default">Overlay</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Scale Up</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Slide</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-position-center uk-position-small">
                            <div class="uk-transition-slide-bottom-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Slide Small</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-position-center uk-position-small">
                            <div class="uk-transition-slide-bottom-medium uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Slide Medium</p>
                </div>
            </div>

            <h2>Slow</h2>

            <div class="uk-grid-small uk-child-width-1-3@s uk-child-width-1-5@m uk-text-center" uk-grid>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-transition-fade uk-transition-slow uk-position-bottom uk-overlay uk-overlay-default">Overlay</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">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-position-center">
                            <div class="uk-transition-scale-up uk-transition-slow uk-overlay uk-overlay-default">Overlay</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Scale Up</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-transition-slide-bottom uk-transition-slow uk-position-bottom uk-overlay uk-overlay-default">Overlay</div>
                    </div>
                    <p class="uk-margin-small-top">Slide</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-position-center uk-position-small">
                            <div class="uk-transition-slide-bottom-small uk-transition-slow uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Slide Small</p>
                </div>
                <div class="uk-text-center">
                    <div class="uk-inline-clip uk-transition-toggle" tabindex="0">
                        <canvas width="600" height="500" class="test-img"></canvas>
                        <div class="uk-position-center uk-position-small">
                            <div class="uk-transition-slide-bottom-medium uk-transition-slow uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
                        </div>
                    </div>
                    <p class="uk-margin-small-top">Slide Medium</p>
                </div>
            </div>
        </div>
    </div>
</div>