<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/hstung/pen/JKrgYL?limit=all&page=18&q=uikit" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/uikit.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/components/slider.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/components/slidenav.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/css/components/dotnav.min.css'>
<style class="cp-pen-styles"></style></head><body>
<div class="uk-margin" data-uk-slideset="{animation: 'fade', default: 2, small: 2, medium: 4, large: 4, xlarge: 4, delay: 0, duration: 800, autoplay: true, autoplayInterval: 5000, delay: 500}">
<div class="uk-slidenav-position uk-margin">
<ul class="uk-slideset uk-grid uk-grid-collapse uk-flex-center uk-grid-width-1-1 uk-grid-width-medium-1-4">
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-1" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-1" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis obcaecati exercitationem aliquam similique quod cumque amet delectus ducimus vitae eligendi, quia assumenda quasi maiores, natus, fugiat magni veniam quibusdam dolorum!</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-2" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-2" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ipsam neque velit voluptates recusandae quod, excepturi odio, libero corporis nostrum sequi aut a obcaecati praesentium iure veritatis cumque atque, modi.</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-3" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-3" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, impedit dignissimos architecto ipsa consectetur sit odit nulla illo tenetur nisi expedita vitae molestias temporibus nemo vero accusantium doloremque voluptate aspernatur.</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-4" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-4" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam numquam voluptas recusandae odio, dolorum quaerat cumque dolore, perspiciatis a ipsum enim tempora. Nesciunt aliquam, architecto et quis est ut!</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-5" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-5" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae quidem, libero magnam sint est illo atque aut voluptatem, tempora modi, quo quibusdam doloribus facilis aliquam. Pariatur architecto facere, quo asperiores!</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-6" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-6" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates ipsam porro totam a adipisci voluptas quos repellendus molestias, voluptatem odit consequatur sed repudiandae quod eveniet tenetur hic quo corporis laudantium.</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-7" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-7" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, neque? Voluptatibus atque velit facere et quisquam magni tempore. Veritatis vitae nobis dolorum sapiente! Id ab molestiae sed, necessitatibus veritatis quos.</p>
</div>
</div>
</div>
</li>
<li>
<div class="uk-thumbnail uk-overlay-hover">
<figure class="uk-overlay">
<img width="600" height="400" title="" alt="" src="https://placeholdit.imgix.net/~text?txtsize=64&txt=placeholder&w=600&h=400" />
<figcaption class="uk-overlay-panel uk-overlay-icon uk-overlay-background uk-overlay-fade">Domino</figcaption>
<a class="uk-position-cover" href="#recommend-food-8" data-uk-modal="{center:true}"></a>
</figure>
<div id="recommend-food-8" class="uk-modal">
<div class="uk-modal-dialog">
<a class="uk-modal-close uk-close"></a>
<h1>Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam placeat commodi explicabo odit quisquam ipsam, quia delectus, natus, aliquam itaque, recusandae cumque! Esse consequuntur praesentium quae possimus eius sequi, quibusdam!</p>
</div>
</div>
</div>
</li>
</ul>
<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideset-item="previous"></a>
<a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideset-item="next"></a>
</div>
<ul class="uk-slideset-nav uk-dotnav uk-flex-center"></ul>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.4/js/components/slideset.min.js'></script>
</body></html>
