/*! * Justified gallery * http://damiangora.com/ * Copyright (c) 2016 Damian Góra * Licensed under the MIT license. */ .dgwt-jg-caption { background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0; box-sizing: border-box; color: #fff; cursor: pointer; height: 100%; opacity: 0; overflow: hidden; padding: 1em; position: absolute; text-align: center; transform-style: preserve-3d; width: 100%; word-wrap: break-word; z-index: 2; } .dgwt-jg-gallery .dgwt-jg-caption { display: none; opacity: 1; transition: none 0s ease 0s ; } .dgwt-jg-gallery .dgwt-jg-caption span { color: #fff; display: block; font-size: 22px; font-weight: 900; letter-spacing: 8px; line-height: 120%; opacity: 0.9; padding: 0 5%; position: relative; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .dgwt-jg-gallery.dgwt-jg-style1 .hover-in-top .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-in-top; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-top; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-top; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-top; bottom: auto; display: block; top: 0; } .dgwt-jg-gallery.dgwt-jg-style1 .hover-out-top .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-out-top; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-top; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-top; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-top; bottom: auto; display: block; top: -100%; } .dgwt-jg-gallery.dgwt-jg-style1 .hover-in-bottom .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-in-bottom; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-bottom; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-bottom; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-bottom; bottom: 0; display: block; top: auto; } .dgwt-jg-gallery.dgwt-jg-style1 .hover-out-bottom .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-out-bottom; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-bottom; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-bottom; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-bottom; bottom: -100%; display: block; top: auto; } .dgwt-jg-gallery.dgwt-jg-style1 .hover-in-left .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-in-left; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-left; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-left; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-left; display: block; left: 0; right: auto; } .dgwt-jg-gallery.dgwt-jg-style1 .hover-out-left .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-out-left; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-left; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-left; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-left; display: block; left: -100%; right: auto; } .dgwt-jg-gallery.dgwt-jg-style1 .hover-in-right .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-in-right; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-right; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-right; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-in-right; display: block; left: auto; right: 0; } .dgwt-jg-gallery.dgwt-jg-style1 .hover-out-right .dgwt-jg-caption { animation: 200ms ease 0s normal none 1 running dgwt-jg-out-right; -webkit-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-right; -moz-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-right; -ms-animation: 200ms ease 0s normal none 1 running dgwt-jg-out-right; display: block; left: auto; right: -100%; } @keyframes dgwt-jg-in-right { 0% { right: -100%; } 100% { right: 0; } } @keyframes dgwt-jg-in-left { 0% { left: -100%; } 100% { left: 0; } } @keyframes dgwt-jg-out-right { 0% { right: 0; } 100% { right: -100%; } } @keyframes dgwt-jg-out-left { 0% { left: 0; } 100% { left: -100%; } } @keyframes dgwt-jg-in-top { 0% { top: -100%; } 100% { top: 0; } } @keyframes dgwt-jg-in-bottom { 0% { bottom: -100%; } 100% { bottom: 0; } } @keyframes dgwt-jg-out-top { 0% { top: 0; } 100% { top: -100%; } } @keyframes dgwt-jg-out-bottom { 0% { bottom: 0; } 100% { bottom: -100%; } } .dgwt-jg-gallery { width: 100%; position: relative; overflow: hidden } .dgwt-jg-gallery > a, .dgwt-jg-gallery > div { position: absolute; display: inline-block; overflow: hidden; margin: 0; padding: 0; border: none; opacity: 0; filter: alpha(opacity=0) } .dgwt-jg-gallery > a > img, .dgwt-jg-gallery > div > img, .dgwt-jg-gallery > a > a > img, .dgwt-jg-gallery > div >a > img { position: absolute; top: 50%; left: 50%; margin: 0; padding: 0; border: 0 } .dgwt-jg-gallery > .jg-filtered { display: none } .dgwt-jg-gallery > .spinner { position: absolute; bottom: 0; margin-left: -24px; padding: 10px 0; left: 50%; opacity: initial; filter: initial; overflow: initial } .dgwt-jg-gallery > .spinner > span { display: inline-block; opacity: 0; filter: alpha(opacity=0); width: 8px; height: 8px; margin: 0 4px; background-color: #000; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px }