uikit
Version:
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
246 lines (238 loc) • 15.5 kB
HTML
<html lang="en-gb" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Transition - UIkit tests</title>
<script src="js/test.js"></script>
</head>
<body>
<div class="uk-container">
<h1>Transition</h1>
<div class="uk-grid-small uk-child-width-1-3@s uk-child-width-1-6@m" uk-grid>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-fade uk-position-bottom uk-overlay uk-overlay-default"><a href="#">Overlay</a></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/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-fade uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Fade Cover</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" 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">Overlay</div>
</div>
<p class="uk-margin-small-top">Fade Cover Small</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-fade uk-overlay-default uk-position-cover"></div>
<div class="uk-position-center">Headline</div>
</div>
<p class="uk-margin-small-top">Without Text</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<span class="uk-position-center uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
</div>
<p class="uk-margin-small-top">Icon</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<img class="uk-transition-fade uk-position-cover" src="images/dark.jpg" alt="">
</div>
<p class="uk-margin-small-top">Fade 2 Images</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-position-center uk-transition-scale-up">Headline</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">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-scale-down uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Scale Down Cover</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/photo.jpg" width="1800" height="1200" 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" tabindex="0">
<img class="uk-transition-scale-down uk-transition-opaque" src="images/photo.jpg" width="1800" height="1200" alt="">
</div>
<p class="uk-margin-small-top">Scale Down Image</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<img class="uk-transition-scale-up uk-position-cover" src="images/dark.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 uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<img class="uk-transition-scale-up uk-position-cover" src="images/dark.jpg" alt="">
<span class="uk-position-center uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
</div>
<p class="uk-margin-small-top">2 Images + Icon</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-top uk-position-top uk-overlay uk-overlay-default">Overlay</div>
</div>
<p class="uk-margin-small-top">Top</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">Overlay</div>
</div>
<p class="uk-margin-small-top">Bottom</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-left uk-position-left uk-overlay uk-overlay-default">Overlay</div>
</div>
<p class="uk-margin-small-top">Left</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-right uk-position-right uk-overlay uk-overlay-default">Overlay</div>
</div>
<p class="uk-margin-small-top">Right</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-top uk-position-cover uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Top Cover</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-bottom uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Bottom Cover</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-position-center">
<div class="uk-transition-slide-top-small">Headline</div>
<div class="uk-transition-slide-bottom-small">Subheadline</div>
</div>
</div>
<p class="uk-margin-small-top">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/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-position-center">
<div class="uk-transition-slide-left-small">Headline</div>
<div class="uk-transition-slide-right-small">Subheadline</div>
</div>
</div>
<p class="uk-margin-small-top">Small Left + Right</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-top-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Top Small</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-bottom-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Bottom Small</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-left-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Left Small</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-right-small uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Right Small</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-position-center">
<div class="uk-transition-slide-top-medium">Headline</div>
<div class="uk-transition-slide-bottom-medium">Subheadline</div>
</div>
</div>
<p class="uk-margin-small-top">Medium Top + Bottom</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-position-center">
<div class="uk-transition-slide-left-medium">Headline</div>
<div class="uk-transition-slide-right-medium">Subheadline</div>
</div>
</div>
<p class="uk-margin-small-top">Medium Left + Right</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-top-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Top Medium</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-bottom-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Bottom Medium</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-left-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Left Medium</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/photo.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-right-medium uk-overlay uk-overlay-default uk-position-cover uk-position-small uk-flex uk-flex-center uk-flex-middle">Overlay</div>
</div>
<p class="uk-margin-small-top">Right Medium</p>
</div>
</div>
</div>
</body>
</html>