CSS   32
lightbox
Guest on 27th August 2023 12:04:39 PM


  1. /* Preload images */
  2. body:after {
  3.   content: url(../images/lightbox/close.png) url(../images/lightbox/loading.gif) url(../images/lightbox/prev.png) url(../images/lightbox/next.png);
  4.   display: none;
  5. }
  6.  
  7. .lightboxOverlay {
  8.   position: absolute;
  9.   top: 0;
  10.   left: 0;
  11.   z-index: 9999;
  12.   background-color: black;
  13.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  14.   opacity: 0.8;
  15.   display: none;
  16. }
  17.  
  18. .lightbox {
  19.   position: absolute;
  20.   left: 0;
  21.   width: 100%;
  22.   z-index: 10000;
  23.   text-align: center;
  24.   line-height: 0;
  25.   font-weight: normal;
  26. }
  27.  
  28. .lightbox .lb-image {
  29.   display: block;
  30.   height: auto;
  31.   max-width: inherit;
  32.   -webkit-border-radius: 3px;
  33.   -moz-border-radius: 3px;
  34.   -ms-border-radius: 3px;
  35.   -o-border-radius: 3px;
  36.   border-radius: 3px;
  37. }
  38.  
  39. .lightbox a img {
  40.   border: none;
  41. }
  42.  
  43. .lb-outerContainer {
  44.   position: relative;
  45.   background-color: white;
  46.   *zoom: 1;
  47.   width: 250px;
  48.   height: 250px;
  49.   margin: 0 auto;
  50.   -webkit-border-radius: 4px;
  51.   -moz-border-radius: 4px;
  52.   -ms-border-radius: 4px;
  53.   -o-border-radius: 4px;
  54.   border-radius: 4px;
  55. }
  56.  
  57. .lb-outerContainer:after {
  58.   content: "";
  59.   display: table;
  60.   clear: both;
  61. }
  62.  
  63. .lb-container {
  64.   padding: 4px;
  65. }
  66.  
  67. .lb-loader {
  68.   position: absolute;
  69.   top: 43%;
  70.   left: 0;
  71.   height: 25%;
  72.   width: 100%;
  73.   text-align: center;
  74.   line-height: 0;
  75. }
  76.  
  77. .lb-nav {
  78.   position: absolute;
  79.   top: 0;
  80.   left: 0;
  81.   height: 100%;
  82.   width: 100%;
  83.   z-index: 10;
  84. }
  85.  
  86. .lb-container > .nav {
  87.   left: 0;
  88. }
  89.  
  90. .lb-nav a {
  91.   outline: none;
  92.   background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
  93. }
  94.  
  95. .lb-prev, .lb-next {
  96.   height: 100%;
  97.   cursor: pointer;
  98.   display: block;
  99. }
  100.  
  101. .lb-nav a.lb-prev {
  102.   width: 34%;
  103.   left: 0;
  104.   float: left;
  105.   background: url(../images/lightbox/prev.png) left 48% no-repeat;
  106.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  107.   opacity: 0;
  108.   -webkit-transition: opacity 0.6s;
  109.   -moz-transition: opacity 0.6s;
  110.   -o-transition: opacity 0.6s;
  111.   transition: opacity 0.6s;
  112. }
  113.  
  114. .lb-nav a.lb-prev:hover {
  115.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  116.   opacity: 1;
  117. }
  118.  
  119. .lb-nav a.lb-next {
  120.   width: 64%;
  121.   right: 0;
  122.   float: right;
  123.   background: url(../images/lightbox/next.png) right 48% no-repeat;
  124.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  125.   opacity: 0;
  126.   -webkit-transition: opacity 0.6s;
  127.   -moz-transition: opacity 0.6s;
  128.   -o-transition: opacity 0.6s;
  129.   transition: opacity 0.6s;
  130. }
  131.  
  132. .lb-nav a.lb-next:hover {
  133.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  134.   opacity: 1;
  135. }
  136.  
  137. .lb-dataContainer {
  138.   margin: 0 auto;
  139.   padding-top: 5px;
  140.   *zoom: 1;
  141.   width: 100%;
  142.   -moz-border-radius-bottomleft: 4px;
  143.   -webkit-border-bottom-left-radius: 4px;
  144.   border-bottom-left-radius: 4px;
  145.   -moz-border-radius-bottomright: 4px;
  146.   -webkit-border-bottom-right-radius: 4px;
  147.   border-bottom-right-radius: 4px;
  148. }
  149.  
  150. .lb-dataContainer:after {
  151.   content: "";
  152.   display: table;
  153.   clear: both;
  154. }
  155.  
  156. .lb-data {
  157.   padding: 0 4px;
  158.   color: #ccc;
  159. }
  160.  
  161. .lb-data .lb-details {
  162.   width: 85%;
  163.   float: left;
  164.   text-align: left;
  165.   line-height: 1.1em;
  166. }
  167.  
  168. .lb-data .lb-caption {
  169.   font-size: 13px;
  170.   font-weight: bold;
  171.   line-height: 1em;
  172. }
  173.  
  174. .lb-data .lb-number {
  175.   display: block;
  176.   visibility: hidden;
  177.   clear: left;
  178.   padding-bottom: 1em;
  179.   font-size: 12px;
  180.   color: #999999;
  181. }
  182.  
  183. .lb-data .lb-close {
  184.   display: block;
  185.   float: right;
  186.   width: 30px;
  187.   height: 30px;
  188.   background: url(../images/lightbox/close.png) top right no-repeat;
  189.   text-align: right;
  190.   outline: none;
  191.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  192.   opacity: 0.7;
  193.   -webkit-transition: opacity 0.2s;
  194.   -moz-transition: opacity 0.2s;
  195.   -o-transition: opacity 0.2s;
  196.   transition: opacity 0.2s;
  197. }
  198.  
  199. .lb-data .lb-close:hover {
  200.   cursor: pointer;
  201.   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  202.   opacity: 1;
  203. }
Raw Paste

Login or Register to edit or fork this paste. It's free.