Pure CSS albums gallery
How do I make an pure css albums gallery?
What is a pure css albums gallery? How do you make a pure css albums gallery? This script and codes were developed by Renaud Tertrais on 12 August 2022, Friday.
Pure CSS albums gallery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS albums gallery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<div id="main" class="container"> <h1 class="text-center">pure CSS albums gallery</h1> <div id="gallery" class="row"> <div class="col-xs-4 gallery-item"> <div class="album"> <img src="http://lorempixel.com/400/400/sports/" alt="" /> <img src="http://lorempixel.com/400/400/nature/" alt="" /> <img src="http://lorempixel.com/400/400/animals/" alt="" /> </div> <p>Holidays</p> </div> <div class="col-xs-4 gallery-item"> <div class="album"> <img src="http://lorempixel.com/400/400/city/" alt="" /> <img src="http://lorempixel.com/400/400/fashion/" alt="" /> <img src="http://lorempixel.com/400/400/people/" alt="" /> </div> <p>Travels</p> </div> <div class="col-xs-4 gallery-item"> <div class="album"> <img src="http://lorempixel.com/400/400/business/" alt="" /> <img src="http://lorempixel.com/400/400/food/" alt="" /> <img src="http://lorempixel.com/400/400/transport/" alt="" /> </div> <p>Working !</p> </div> <div class="col-xs-4 gallery-item"> <div class="album"> <img src="http://lorempixel.com/400/400/nightlife/" alt="" /> <img src="http://lorempixel.com/400/400/technics/" alt="" /> <img src="http://lorempixel.com/400/400/abstract/" alt="" /> </div> <p>2012 - 2013</p> </div> <div class="col-xs-4 gallery-item"> <div class="album"> <img src="http://lorempixel.com/400/400/food/" alt="" /> <img src="http://lorempixel.com/400/400/animals/" alt="" /> <img src="http://lorempixel.com/400/400/cats/" alt="" /> </div> <p>Stuff</p> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Pure CSS albums gallery - Script Codes CSS Codes
body { background-color: #00181F !important; padding: 0 100px;
}
#main h1 { color: #FFF; font-weight: 100; letter-spacing: 3px; padding: 40px 0 70px;
}
#main #gallery .gallery-item { height: 300px;
}
#main #gallery .gallery-item .album { position: relative; width: 80%; margin: auto; -moz-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;
}
#main #gallery .gallery-item .album img { width: 100%; position: absolute; cursor: pointer; top: 0; left: 0; border: 4px solid #FFF; -moz-box-shadow: 0 0 4px black; -webkit-box-shadow: 0 0 4px black; box-shadow: 0 0 4px black; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; -moz-transform-origin: 50% 50% 50%; -ms-transform-origin: 50% 50% 50%; -webkit-transform-origin: 50% 50% 50%; transform-origin: 50% 50% 50%;
}
#main #gallery .gallery-item .album img:first-child { position: relative; z-index: 1000;
}
#main #gallery .gallery-item .album img:first-child + img { -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -webkit-transform: rotate(-4deg); transform: rotate(-4deg);
}
#main #gallery .gallery-item .album img:last-child { -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -webkit-transform: rotate(4deg); transform: rotate(4deg);
}
#main #gallery .gallery-item .album:hover { width: 85%;
}
#main #gallery .gallery-item .album:hover img { z-index: 2000;
}
#main #gallery .gallery-item .album:hover img:first-child { z-index: 3000;
}
#main #gallery .gallery-item .album:hover img:first-child + img { left: -40px; -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
#main #gallery .gallery-item .album:hover img:last-child { left: 40px; -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg);
}
#main #gallery .gallery-item p { width: 100%; text-align: center; color: #FFF; padding-top: 20px;
}
Pure CSS albums gallery - Script Codes JS Codes
// NO JS here....
Developer | Renaud Tertrais |
Username | renaudtertrais |
Uploaded | August 12, 2022 |
Rating | 3.5 |
Size | 2,978 Kb |
Views | 62,744 |
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!
Name | Size |
Angular JS - Basic app | 2,394 Kb |
React-a11y-range | 7,029 Kb |
Flat Blog layout in CSS3 | 4,111 Kb |
Buttons wip... | 4,057 Kb |
Images gallery with CSS3 transitions | 2,356 Kb |
Flat CSS3 rating system | 2,752 Kb |
Playing with Mustache and Google Chart | 3,289 Kb |
React Flat Gradient | 5,268 Kb |
React-draggable | 2,539 Kb |
Flat CSS3 Breadcrumb | 3,093 Kb |
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!
Name | Username | Size |
Image Hover | Johnheiner | 3,409 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
Bootstrap Responsive Menu Drawer | JesseGlacken | 3,777 Kb |
Fun form with currentColor | Bnthor | 2,713 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Speech bubbles | Something | 1,547 Kb |
Animate a paper plane along an SVG path, looking ahead | PotatoDie | 3,734 Kb |
Flex layout example | Mofny | 1,663 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Form Labels | Bartuc | 2,717 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!