Pure CSS Image Gallery

Developer
Elad Shechter
Size
4,950 Kb
Views
40,480
  1. Pure CSS Image Gallery Previews
  2. Pure CSS Image Gallery HTML Codes
  3. Pure CSS Image Gallery CSS Codes
  4. Pure CSS Image Gallery JS Codes

How do I make an pure css image gallery?

What is a pure css image gallery? How do you make a pure css image gallery? This script and codes were developed by Elad Shechter on 13 July 2022, Wednesday.

Pure CSS Image Gallery Previews
IQ Test

Pure CSS Image Gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Image Gallery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { background-color: #81b5d6; background-repeat: no-repeat; color: #eee;
}
.title { font-size: 40px; color: antiquewhite; font-weight: bold; text-align: center; margin: 15px 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.gallery { border: solid 10px #000; border-radius: 10px; width: 600px; margin: 0 auto; margin-top: 30px; white-space: nowrap; overflow: hidden; position: relative; font-size: 0; line-height: 0;
}
.wrapper > * { display: inline-block;
}
.box { transition: 9999999s; background-size: cover; width: 520px; height: 338px; display: inline-block; vertical-align: top;
}
.button { transition: 9999999s; display: inline-block; width: 40px; height: 338px; cursor: pointer; background-color: #111; color: #fff;
}
.button:before { display: block; vertical-align: center; font-size: 50px; line-height: 338px; text-align: center; transform: scale(1, 2);
}
.next { right: 0;
}
.next:before { content: ">";
}
.prev { left: 0;
}
.prev:before { content: "<";
}
/*******common pager*********/
/*next*/
.box + .next:active + .prev { transition: 0s;
}
.box + .next:active + .prev + .box { transition: 0s;
}
.box + .next:active + .prev + .box + .next { transition: 0s;
}
/*prev*/
.box + .next + .prev:active { transition: 0s;
}
.box + .next + .prev:active + .box { transition: 0s;
}
.box + .next + .prev:active + .box + .next { transition: 0s;
}
/******from Yellow to red******/
.item-1 + .next:active + .prev { transform: translateX(-600px);
}
.item-1 + .next:active + .prev + .item-2 { transform: translateX(-600px);
}
.item-1 + .next:active + .prev + .item-2 + .next { transform: translateX(-600px);
}
/******from red back to yellow******/
.item-1 + .next + .prev:active { transform: translateX(0);
}
.item-1 + .next + .prev:active + .item-2 { transform: translateX(0);
}
.item-1 + .next + .prev:active + .item-2 + .next { transform: translateX(0);
}
/******from red to blue******/
.item-2 + .next:active + .prev { transform: translateX(-1200px);
}
.item-2 + .next:active + .prev + .item-3 { transform: translateX(-1200px);
}
.item-2 + .next:active + .prev + .item-3 + .next { transform: translateX(-1200px);
}
/******from blue back to red******/
.item-2 + .next + .prev:active { transform: translateX(-600px);
}
.item-2 + .next + .prev:active + .item-3 { transform: translateX(-600px);
}
.item-2 + .next + .prev:active + .item-3 + .next { transform: translateX(-600px);
}
/******from red to blue******/
.item-3 + .next:active + .prev { transform: translateX(-1800px);
}
.item-3 + .next:active + .prev + .item-4 { transform: translateX(-1800px);
}
.item-3 + .next:active + .prev + .item-4 + .next { transform: translateX(-1800px);
}
/******from blue back to red******/
.item-3 + .next + .prev:active { transform: translateX(-1200px);
}
.item-3 + .next + .prev:active + .item-4 { transform: translateX(-1200px);
}
.item-3 + .next + .prev:active + .item-4 + .next { transform: translateX(-1200px);
}
/******from red to blue******/
.item-4 + .next:active + .prev { transform: translateX(-2400px);
}
.item-4 + .next:active + .prev + .item-5 { transform: translateX(-2400px);
}
.item-4 + .next:active + .prev + .item-5 + .next { transform: translateX(-2400px);
}
/******from blue back to red******/
.item-4 + .next + .prev:active { transform: translateX(-1800px);
}
.item-4 + .next + .prev:active + .item-5 { transform: translateX(-1800px);
}
.item-4 + .next + .prev:active + .item-5 + .next { transform: translateX(-1800px);
}
.wrapper *:first-child,
.wrapper *:last-child { width: 560px;
}
/*images of gallery*/
.item-1 { background-image: url(https://scontent-a-lhr.xx.fbcdn.net/hphotos-ash3/t31/131358_10151844912596933_1989911666_o.jpg);
}
.item-2 { background-image: url(https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/1555340_10151833079796933_514060703_n.jpg);
}
.item-3 { background-image: url(https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/t1/1609599_10151831839976933_658574256_n.jpg);
}
.item-4 { background-image: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash3/t1/994649_10151755587611933_1087155071_n.jpg);
}
.item-5 { background-image: url(https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t31/1266700_10151567307011933_1129954676_o.jpg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="title">Pure CSS Image Gallery</div>
<div class="gallery"> <div class="wrapper"> <div class="box item-1"></div> <a class="button next"></a> <a class="button prev"></a> <div class="box item-2"></div> <a class="button next"></a> <a class="button prev"></a> <div class="box item-3"></div> <a class="button next"></a> <a class="button prev"></a> <div class="box item-4"></div> <a class="button next"></a> <a class="button prev"></a> <div class="box item-5"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Image Gallery - Script Codes CSS Codes

html { background-color: #81b5d6; background-repeat: no-repeat; color: #eee;
}
.title { font-size: 40px; color: antiquewhite; font-weight: bold; text-align: center; margin: 15px 0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.gallery { border: solid 10px #000; border-radius: 10px; width: 600px; margin: 0 auto; margin-top: 30px; white-space: nowrap; overflow: hidden; position: relative; font-size: 0; line-height: 0;
}
.wrapper > * { display: inline-block;
}
.box { transition: 9999999s; background-size: cover; width: 520px; height: 338px; display: inline-block; vertical-align: top;
}
.button { transition: 9999999s; display: inline-block; width: 40px; height: 338px; cursor: pointer; background-color: #111; color: #fff;
}
.button:before { display: block; vertical-align: center; font-size: 50px; line-height: 338px; text-align: center; transform: scale(1, 2);
}
.next { right: 0;
}
.next:before { content: ">";
}
.prev { left: 0;
}
.prev:before { content: "<";
}
/*******common pager*********/
/*next*/
.box + .next:active + .prev { transition: 0s;
}
.box + .next:active + .prev + .box { transition: 0s;
}
.box + .next:active + .prev + .box + .next { transition: 0s;
}
/*prev*/
.box + .next + .prev:active { transition: 0s;
}
.box + .next + .prev:active + .box { transition: 0s;
}
.box + .next + .prev:active + .box + .next { transition: 0s;
}
/******from Yellow to red******/
.item-1 + .next:active + .prev { transform: translateX(-600px);
}
.item-1 + .next:active + .prev + .item-2 { transform: translateX(-600px);
}
.item-1 + .next:active + .prev + .item-2 + .next { transform: translateX(-600px);
}
/******from red back to yellow******/
.item-1 + .next + .prev:active { transform: translateX(0);
}
.item-1 + .next + .prev:active + .item-2 { transform: translateX(0);
}
.item-1 + .next + .prev:active + .item-2 + .next { transform: translateX(0);
}
/******from red to blue******/
.item-2 + .next:active + .prev { transform: translateX(-1200px);
}
.item-2 + .next:active + .prev + .item-3 { transform: translateX(-1200px);
}
.item-2 + .next:active + .prev + .item-3 + .next { transform: translateX(-1200px);
}
/******from blue back to red******/
.item-2 + .next + .prev:active { transform: translateX(-600px);
}
.item-2 + .next + .prev:active + .item-3 { transform: translateX(-600px);
}
.item-2 + .next + .prev:active + .item-3 + .next { transform: translateX(-600px);
}
/******from red to blue******/
.item-3 + .next:active + .prev { transform: translateX(-1800px);
}
.item-3 + .next:active + .prev + .item-4 { transform: translateX(-1800px);
}
.item-3 + .next:active + .prev + .item-4 + .next { transform: translateX(-1800px);
}
/******from blue back to red******/
.item-3 + .next + .prev:active { transform: translateX(-1200px);
}
.item-3 + .next + .prev:active + .item-4 { transform: translateX(-1200px);
}
.item-3 + .next + .prev:active + .item-4 + .next { transform: translateX(-1200px);
}
/******from red to blue******/
.item-4 + .next:active + .prev { transform: translateX(-2400px);
}
.item-4 + .next:active + .prev + .item-5 { transform: translateX(-2400px);
}
.item-4 + .next:active + .prev + .item-5 + .next { transform: translateX(-2400px);
}
/******from blue back to red******/
.item-4 + .next + .prev:active { transform: translateX(-1800px);
}
.item-4 + .next + .prev:active + .item-5 { transform: translateX(-1800px);
}
.item-4 + .next + .prev:active + .item-5 + .next { transform: translateX(-1800px);
}
.wrapper *:first-child,
.wrapper *:last-child { width: 560px;
}
/*images of gallery*/
.item-1 { background-image: url(https://scontent-a-lhr.xx.fbcdn.net/hphotos-ash3/t31/131358_10151844912596933_1989911666_o.jpg);
}
.item-2 { background-image: url(https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/1555340_10151833079796933_514060703_n.jpg);
}
.item-3 { background-image: url(https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/t1/1609599_10151831839976933_658574256_n.jpg);
}
.item-4 { background-image: url(https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash3/t1/994649_10151755587611933_1087155071_n.jpg);
}
.item-5 { background-image: url(https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/t31/1266700_10151567307011933_1129954676_o.jpg);
}

Pure CSS Image Gallery - Script Codes JS Codes

/**
Pure CSS Image Gallery
------------------------------
Author: Elad Shechter
http://il.linkedin.com/in/eladshechter/
https://coderwall.com/p/u/elad2412
MY FACEBOOK GROUP
https://www.facebook.com/groups/css.master/
**/
Pure CSS Image Gallery - Script Codes
Pure CSS Image Gallery - Script Codes
Home Page Home
Developer Elad Shechter
Username elad2412
Uploaded July 13, 2022
Rating 3
Size 4,950 Kb
Views 40,480
Do you need developer help for Pure CSS Image Gallery?

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!

Elad Shechter (elad2412) Script Codes
Name
Flipped card use only CSS
PURE CSS GAME - NO JS
Css - ellipsis
Dynamic element size via CSS position manipulation
Pure CSS Notification Panel
Background clip and origin
Image Gallery no JS
Background-origin CSS3
Color Like Buttons of Facebook
Background-origin and background-clip
Create amazing SEO content 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!