Pure CSS Image Gallery

Developer
Assaf Gelber
Size
3,911 Kb
Views
8,096
  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?

Image gallery using only css. What is a pure css image gallery? How do you make a pure css image gallery? This script and codes were developed by Assaf Gelber on 03 January 2023, Tuesday.

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> <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! */ div, ul, li, img { box-sizing: border-box;
}
body { background-color: #e8e8e8; text-align: center;
}
.gallery { width: 400px; overflow: hidden; border: 1px solid #aaa; margin: 20px auto; padding: 20px; background-image: radial-gradient(#aaaaaa 0%, #666666 90%, #555555 100%);
}
.gallery-images { width: 1200px; text-align: left; position: relative; padding: 0; margin: 0; transition: left 0.5s;
}
.gallery-item { display: inline;
}
.gallery-item img { width: 300px; height: 200px; padding: 0; margin: 10px 0; border: 1px solid #aaa; cursor: pointer;
}
.gallery-item:not(:first-child) img { margin-left: 10px;
}
.gallery-item:first-child img { margin-left: 30px;
}
.gallery input { display: none;
}
.gallery input + label { background-color: #aaa; height: 6px; width: 24px; display: inline-block; border: 1px solid #444; cursor: pointer; transition: all 0.5s;
}
.gallery input + label:hover { box-shadow: 0 0 3px 0 #555;
}
.gallery input:checked + label { background-color: #f1f1f1;
}
.gallery #ind-1:checked ~ .gallery-images { left: 0;
}
.gallery #ind-2:checked ~ .gallery-images { left: -310px;
}
.gallery #ind-3:checked ~ .gallery-images { left: -620px;
}
#credit { font-family: "Calibri";
}
#credit a { color: #000;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='gallery'> <input checked='' id='ind-1' name='gallery' type='radio'> <label for='ind-1'></label> </input> <input id='ind-2' name='gallery' type='radio'> <label for='ind-2'></label> </input> <input id='ind-3' name='gallery' type='radio'> <label for='ind-3'></label> </input> <ul class='gallery-images'> <li class='gallery-item'> <label for='ind-1'> <img src='https://25.media.tumblr.com/42398e2ce1fe4c264db448a8ce2f8caf/tumblr_mhkd1xJ6N81qkegsbo1_500.png'> </label> </li> <li class='gallery-item'> <label for='ind-2'> <img src='https://25.media.tumblr.com/2f638a7a862b55af7e9757ccb8308739/tumblr_mhkd5kf3vf1qkegsbo1_500.jpg'> </label> </li> <li class='gallery-item'> <label for='ind-3'> <img src='https://25.media.tumblr.com/22d4b1e8b40a127df8061575eec00a08/tumblr_mhi8o0CVvE1qkegsbo1_500.jpg'> </label> </li> </ul>
</div>
<div id='credit'> Images from <a href='http://www.theultralinx.com'> The Ultralinx </a>
</div> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Image Gallery - Script Codes CSS Codes

div, ul, li, img { box-sizing: border-box;
}
body { background-color: #e8e8e8; text-align: center;
}
.gallery { width: 400px; overflow: hidden; border: 1px solid #aaa; margin: 20px auto; padding: 20px; background-image: radial-gradient(#aaaaaa 0%, #666666 90%, #555555 100%);
}
.gallery-images { width: 1200px; text-align: left; position: relative; padding: 0; margin: 0; transition: left 0.5s;
}
.gallery-item { display: inline;
}
.gallery-item img { width: 300px; height: 200px; padding: 0; margin: 10px 0; border: 1px solid #aaa; cursor: pointer;
}
.gallery-item:not(:first-child) img { margin-left: 10px;
}
.gallery-item:first-child img { margin-left: 30px;
}
.gallery input { display: none;
}
.gallery input + label { background-color: #aaa; height: 6px; width: 24px; display: inline-block; border: 1px solid #444; cursor: pointer; transition: all 0.5s;
}
.gallery input + label:hover { box-shadow: 0 0 3px 0 #555;
}
.gallery input:checked + label { background-color: #f1f1f1;
}
.gallery #ind-1:checked ~ .gallery-images { left: 0;
}
.gallery #ind-2:checked ~ .gallery-images { left: -310px;
}
.gallery #ind-3:checked ~ .gallery-images { left: -620px;
}
#credit { font-family: "Calibri";
}
#credit a { color: #000;
}

Pure CSS Image Gallery - Script Codes JS Codes

/* NO JS */
Pure CSS Image Gallery - Script Codes
Pure CSS Image Gallery - Script Codes
Home Page Home
Developer Assaf Gelber
Username agelber
Uploaded January 03, 2023
Rating 3.5
Size 3,911 Kb
Views 8,096
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!

Assaf Gelber (agelber) Script Codes
Name
Translate Demo
Transition Demo
Form Placeholder Labels
Blurring Menu
ScaleZ Demo
Simple Night Sky
Perspective Demo
Text Looping Transition
TranslateZ Demo
Origin Demo
Create amazing love letters 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!