"slide uikit"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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/SitePoint/pen/OVjmWb?q=uikit&limit=all&type=type-pens" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.20.3/css/uikit.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.20.3/css/components/slideshow.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.20.3/css/components/dotnav.min.css'> <style class="cp-pen-styles">/* GENERAL STYLES –––––––––––––––––––––––––––––––––––––––––––––––––– */ .uk-overlay-panel { width: 20%; background:rgba(0, 0, 0, .35); left: auto; } .uk-position-top { top: 15px; } .caption { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } h3 { font-size: 2.2em; font-weight: bold; line-height: 1.2em; text-transform: uppercase; } p { margin: 40px 0; } /* MQ STYLES –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media screen and (max-width: 900px) { .uk-overlay-panel { left: 0; width: 100%; top: auto; padding: 15px 10px; box-sizing: border-box; } .caption { position: static; -webkit-transform: none; transform: none; } p { margin: 10px 0; } }</style></head><body> <div data-uk-slideshow> <ul class="uk-slideshow uk-slideshow-fullscreen"> <li> <img src="https://download.unsplash.com/photo-1414446483597-8d8f792bfe39"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> <div class="caption"> <h3>Example 1</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> </div> </li> <li> <img src="https://download.unsplash.com/photo-1417870839255-a23faa90c6b0"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> <div class="caption"> <h3>Example 2</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div> </li> <li> <img src="https://unsplash.com/photos/34mvN5nt1ls/download"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> <div class="caption"> <h3>Example 3</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p> </div> </div> </li> <li> <img src="https://download.unsplash.com/photo-1428550670225-15f007f6f1ba"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-fade"> <div class="caption"> <h3>Example 4</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </div> </div> </li> </ul> <ul class="uk-dotnav uk-dotnav-contrast uk-position-top uk-flex-center"> <li data-uk-slideshow-item="0"><a href=""></a></li> <li data-uk-slideshow-item="1"><a href=""></a></li> <li data-uk-slideshow-item="2"><a href=""></a></li> <li data-uk-slideshow-item="3"><a href=""></a></li> </ul> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.20.3/js/uikit.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/uikit/2.20.3/js/components/slideshow.min.js'></script> </body></html>

Related: See More

Rotating CSS Card
Mega menu slide down on hover with carousel
Slide dropdown navigation
Shoji Layout: Slide-in Side Panels for XS Viewports

Questions / Comments: