A Pen by Fabio Ottaviani on CodePen.
Created
March 18, 2017 09:39
-
-
Save 0xv/60009be0d684b522eecd57df0238e207 to your computer and use it in GitHub Desktop.
DailyUI #016 - Popup / Overlay
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Photos from unsplash.com | |
| Follow me on | |
| Dribbble: https://dribbble.com/supahfunk | |
| Twitter: https://twitter.com/supahfunk | |
| Codepen: http://codepen.io/supah/ | |
| --> | |
| <div class="gallery"> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Daytona Beach <small>United States</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption> | |
| Bad Pyrmont <small>Deutschland</small> | |
| </figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Yellowstone National Park <small>United States</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Highlands <small>United States</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1448814100339-234df1d4005d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Daytona Beach <small>United States</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption> | |
| Bad Pyrmont <small>Deutschland</small> | |
| </figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1439798060585-62ab242d7724?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Yellowstone National Park <small>United States</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1440339738560-7ea831bf5244?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Quiraing, Portree <small>United Kingdom</small></figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://images.unsplash.com/photo-1441906363162-903afd0d3d52?crop=entropy&fit=crop&fm=jpg&h=400&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=600" alt="" /> | |
| <figcaption>Highlands <small>United States</small></figcaption> | |
| </figure> | |
| </div> | |
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;"> | |
| <symbol id="close" viewBox="0 0 18 18"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M9,0.493C4.302,0.493,0.493,4.302,0.493,9S4.302,17.507,9,17.507 | |
| S17.507,13.698,17.507,9S13.698,0.493,9,0.493z M12.491,11.491c0.292,0.296,0.292,0.773,0,1.068c-0.293,0.295-0.767,0.295-1.059,0 | |
| l-2.435-2.457L6.564,12.56c-0.292,0.295-0.766,0.295-1.058,0c-0.292-0.295-0.292-0.772,0-1.068L7.94,9.035L5.435,6.507 | |
| c-0.292-0.295-0.292-0.773,0-1.068c0.293-0.295,0.766-0.295,1.059,0l2.504,2.528l2.505-2.528c0.292-0.295,0.767-0.295,1.059,0 | |
| s0.292,0.773,0,1.068l-2.505,2.528L12.491,11.491z"/> | |
| </symbol> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| popup = { | |
| init: function(){ | |
| $('figure').click(function(){ | |
| popup.open($(this)); | |
| }); | |
| $(document).on('click', '.popup img', function(){ | |
| return false; | |
| }).on('click', '.popup', function(){ | |
| popup.close(); | |
| }) | |
| }, | |
| open: function($figure) { | |
| $('.gallery').addClass('pop'); | |
| $popup = $('<div class="popup" />').appendTo($('body')); | |
| $fig = $figure.clone().appendTo($('.popup')); | |
| $bg = $('<div class="bg" />').appendTo($('.popup')); | |
| $close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig); | |
| $shadow = $('<div class="shadow" />').appendTo($fig); | |
| src = $('img', $fig).attr('src'); | |
| $shadow.css({backgroundImage: 'url(' + src + ')'}); | |
| $bg.css({backgroundImage: 'url(' + src + ')'}); | |
| setTimeout(function(){ | |
| $('.popup').addClass('pop'); | |
| }, 10); | |
| }, | |
| close: function(){ | |
| $('.gallery, .popup').removeClass('pop'); | |
| setTimeout(function(){ | |
| $('.popup').remove() | |
| }, 100); | |
| } | |
| } | |
| popup.init() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| img { | |
| display: block; | |
| } | |
| .gallery { | |
| position: relative; | |
| z-index: 2; | |
| padding: 10px; | |
| display: flex; | |
| flex-flow: row wrap; | |
| justify-content: space-between; | |
| transition: all .5s ease-in-out; | |
| &.pop { | |
| filter: blur(10px); | |
| } | |
| figure { | |
| flex-basis: 33.333%; | |
| padding: 10px; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| cursor: pointer; | |
| img { | |
| width: 100%; | |
| border-radius: 10px; | |
| transition: all .3s ease-in-out; | |
| } | |
| figcaption { | |
| display: none; | |
| } | |
| } | |
| } | |
| .popup { | |
| position: fixed; | |
| z-index: 2; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(255, 255, 255, 0.75); | |
| opacity: 0; | |
| transition: opacity .5s ease-in-out .2s; | |
| &.pop { | |
| opacity: 1; | |
| transition: opacity .2s ease-in-out 0s; | |
| figure { | |
| margin-top: 0; | |
| opacity: 1; | |
| } | |
| } | |
| figure { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| transform-origin: 0 0; | |
| margin-top: 30px; | |
| opacity: 0; | |
| animation: poppy 500ms linear both; | |
| img { | |
| position: relative; | |
| z-index: 2; | |
| border-radius: 15px; | |
| box-shadow: 0 1px 5px rgba(0, 0, 0, .2), 0 6px 30px rgba(0, 0, 0, .4); | |
| } | |
| figcaption { | |
| position: absolute; | |
| bottom: 50px; | |
| background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.78)); | |
| z-index: 2; | |
| width: 100%; | |
| border-radius: 0 0 15px 15px; | |
| padding: 100px 20px 20px 20px; | |
| color: #fff; | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 32px; | |
| small { | |
| font-size: 11px; | |
| display: block; | |
| text-transform: uppercase; | |
| margin-top: 12px; | |
| text-indent: 3px; | |
| opacity: .7; | |
| letter-spacing: 1px; | |
| } | |
| } | |
| .shadow { | |
| position: relative; | |
| z-index: 1; | |
| top: -15px; | |
| margin: 0 auto; | |
| background-position: center bottom; | |
| background-repeat: no-repeat; | |
| width: 98%; | |
| height: 50px; | |
| opacity: .6; | |
| filter: blur(15px) contrast(2); | |
| } | |
| } | |
| .close { | |
| position: absolute; | |
| z-index: 3; | |
| top: 10px; | |
| right: 10px; | |
| width: 25px; | |
| height: 25px; | |
| cursor: pointer; | |
| background: url(#close); | |
| border-radius: 25px; | |
| background: rgba(0, 0, 0, .1); | |
| box-shadow: 0 0 3px rgba(0, 0, 0, .2); | |
| svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| } | |
| } | |
| @keyframes poppy { | |
| 0% { transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } | |
| 3.4% { transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1); } | |
| 4.3% { transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1); } | |
| 4.7% { transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1); } | |
| 6.81% { transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1); } | |
| 8.61% { transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1); } | |
| 9.41% { transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1); } | |
| 10.21% { transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1); } | |
| 12.91% { transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1); } | |
| 13.61% { transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1); } | |
| 14.11% { transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1); } | |
| 17.22% { transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1); } | |
| 17.52% { transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1); } | |
| 18.72% { transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1); } | |
| 21.32% { transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1); } | |
| 24.32% { transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1); } | |
| 25.23% { transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1); } | |
| 28.33% { transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1); } | |
| 29.03% { transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1); } | |
| 29.93% { transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1); } | |
| 35.54% { transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1); } | |
| 36.74% { transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1); } | |
| 39.44% { transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1); } | |
| 41.04% { transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1); } | |
| 44.44% { transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1); } | |
| 52.15% { transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1); } | |
| 59.86% { transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1); } | |
| 61.66% { transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1); } | |
| 63.26% { transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1); } | |
| 75.28% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1); } | |
| 83.98% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1); } | |
| 85.49% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1); } | |
| 90.69% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1); } | |
| 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1); } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment