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 |
React-draggable | 2,539 Kb |
Playing with Mustache and Google Chart | 3,289 Kb |
Flat CSS3 Breadcrumb | 3,093 Kb |
Pure CSS albums gallery | 2,978 Kb |
Flat CSS3 rating system | 2,752 Kb |
Pure CSS3 arrow icons | 4,030 Kb |
A Pen by Renaud Tertrais | 3,033 Kb |
Flat Blog layout in CSS3 | 4,111 Kb |
TCP Brut Force | 4,629 Kb |
CSS3 Transitions on grid | 2,404 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 |
3D Text in Sass | Bookcasey | 2,766 Kb |
GrcJS | Vino6 | 2,047 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Responsive slide | Thorien | 2,400 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Knockout Lists | Marinru | 2,531 Kb |
Click handler test | Snapson | 2,329 Kb |
Clock with full screen background | Owebboy | 2,415 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!