Lightbox without JS, with lazy load

Developer
Twikito
Size
3,701 Kb
Views
32,384
  1. Lightbox without JS, with lazy load Previews
  2. Lightbox without JS, with lazy load HTML Codes
  3. Lightbox without JS, with lazy load CSS Codes
  4. Lightbox without JS, with lazy load JS Codes

How do I make an lightbox without js, with lazy load?

A simple Lightbox made without JavaScript. It simply works with :focus pseudo-class on the trigger element.. What is a lightbox without js, with lazy load? How do you make a lightbox without js, with lazy load? This script and codes were developed by Twikito on 11 September 2022, Sunday.

Lightbox without JS, with lazy load Previews
IQ Test

Lightbox without JS, with lazy load - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lightbox without JS, with lazy load</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a role="button" data-action="lbwojs" href="#" title="Lightbox without JavaScript" tabindex="0">	<img src="http://static.gamesradar.com/images/totalfilm/c/chris-pratt-talk-s-star-lord-s-backstory-in-guardians-of-the-galaxy-159091-a-1395302143-470-75.jpg" alt="GotG">
</a>
<div class="lbwojs">	<div class="lbwojs-effect">	<div class="lbwojs-img-container">	<div class="lbwojs-img" style="background-image:url(http://images.fandango.com/images/fandangoblog/GOTG_Bus%20Shelter_Gamora_v6a_lg.jpg)"></div>	<!-- background-image for lazy loading -->	</div>	</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Lightbox without JS, with lazy load - Script Codes CSS Codes

@charset "UTF-8";
.lbwojs { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1337; background: rgba(0, 0, 0, 0.75); opacity: 0; visibility: hidden; -webkit-transition: 0.25s cubic-bezier(0.075, 0.82, 0.165, 1); transition: 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lbwojs::before { position: absolute; top: 50%; left: 50%; z-index: 0; padding: .5em 1em; background: black; opacity: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; text-transform: uppercase; content: "loading…";
}
.lbwojs .lbwojs-effect { position: absolute; top: 5%; left: 5%; right: 5%; bottom: 5%; z-index: 1; opacity: 0; -webkit-transform: scale(0.8); transform: scale(0.8);
}
.lbwojs .lbwojs-img-container { display: none;
}
.lbwojs .lbwojs-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: center / contain no-repeat;
}
[data-action="lbwojs"]:focus ~ .lbwojs { opacity: 1; visibility: visible;
}
[data-action="lbwojs"]:focus ~ .lbwojs::before { opacity: 1; -webkit-transition: opacity 0.75s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s; transition: opacity 0.75s cubic-bezier(0.075, 0.82, 0.165, 1) 0.25s;
}
[data-action="lbwojs"]:focus ~ .lbwojs .lbwojs-effect { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: 0.75s cubic-bezier(0.075, 0.82, 0.165, 1); transition: 0.75s cubic-bezier(0.075, 0.82, 0.165, 1);
}
[data-action="lbwojs"]:focus ~ .lbwojs .lbwojs-img-container { display: block;
}
.lbwojs { -webkit-perspective: 2000px; perspective: 2000px;
}
.lbwojs .lbwojs-effect { -webkit-transform: translateY(-10%) scale(0.8) rotateX(15deg); transform: translateY(-10%) scale(0.8) rotateX(15deg);
}
[data-action="lbwojs"]:focus ~ .lbwojs .lbwojs-effect { -webkit-transform: translateY(0) scale(1) rotateX(0); transform: translateY(0) scale(1) rotateX(0);
}
/* FOR DEMO ----------------------------- */
a { display: block; width: 350px; margin: auto; border: 1em solid rgba(255, 255, 255, 0.25); -webkit-transition: border-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); transition: border-color 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
a:hover, a:focus { border-color: white;
}
a img { display: block; width: auto; max-width: 100%;
}
/* MISC --------------------------------- */
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; background: #3498db; color: white; font: 1em/1.4 "lato"; font-weight: 300;
}
a { color: inherit;
}

Lightbox without JS, with lazy load - Script Codes JS Codes

/*	NO JS!
*/
Lightbox without JS, with lazy load - Script Codes
Lightbox without JS, with lazy load - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 4.5
Size 3,701 Kb
Views 32,384
Do you need developer help for Lightbox without JS, with lazy load?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twikito (Twikito) Script Codes
Name
UI with UX improvements with only CSS
CSS-only shadow-scrolling effect
Easy and Bulletproof ScrollTo Script
Picture hover effect with pseudo-elements
Beautiful Textual Map of France with CSS
Tooltip with pseudo-element
Summary with pseudo-element
Breadcrum for shopping path with only css
CSS3 Box Shadows Effects
Input awesome effect on focus with only css
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!