Images gallery with CSS3 transitions
How do I make an images gallery with css3 transitions?
What is a images gallery with css3 transitions? How do you make a images gallery with css3 transitions? This script and codes were developed by Renaud Tertrais on 12 August 2022, Friday.
Images gallery with CSS3 transitions - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Images gallery with CSS3 transitions</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='row'> <div class='item'> <img src='http://lorempixel.com/600/500/nature'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/sports'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/abstract'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/fashion'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/city'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/animals'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/nightlife'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/business'> </div> <div class='item'> <img src='http://lorempixel.com/600/500/food'> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Images gallery with CSS3 transitions - Script Codes CSS Codes
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; background-color: #000;
}
.item { height: 200px; overflow: hidden; width: 33.33333%; float: left; cursor: pointer;
}
.item img { max-width: 100%; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.item:hover img { max-width: 120%; margin-left: -10%; margin-top: -10%;
}
.row:hover .item img { opacity: .2;
}
.row:hover .item:hover img { opacity: 1;
}
Developer | Renaud Tertrais |
Username | renaudtertrais |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 2,356 Kb |
Views | 22,264 |
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 |
Console | 3,320 Kb |
React-a11y-range | 7,029 Kb |
Pure CSS albums gallery | 2,978 Kb |
Playing with Mustache and Google Chart | 3,289 Kb |
TCP Brut Force | 4,629 Kb |
React Flat Gradient | 5,268 Kb |
Pure CSS3 arrow icons | 4,030 Kb |
Flat CSS3 Breadcrumb | 3,093 Kb |
Angular JS - Basic app | 2,394 Kb |
A Pen by Renaud Tertrais | 3,033 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 |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Heartbeat | Apetrov | 2,079 Kb |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 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!