Smooth Quad Image Gallery in HTML, CSS and JavaScript
When developing a webpage, it is always important to have image gallery which creates a good impression on the visitors. Today, I’m glad to present the Smooth Quad Image Gallery created in HTML, CSS, JavaScript.
GitHub Source: Smooth Quad Image Gallery
This elegant & optimized gallery is suitable for business and personal websites, and I’m giving you the complete source code for nothing.
No matter if you are designing a new website from scratch or implementing your site to a Content Management System as WordPress, Gallery is functional for all cases.
Check complete project: Google Drive Direct Download Link Generator
Features
- Responsive Design: One of the design features is that the layout of the gallery is responsive to the screen on a PC or on a portable device.
- Smooth Hover Effects: Get seamless transition and effects when the users are hovering over the images so as to have more interactivity.
- Cross-Browser Compatibility: This gallery can be viewed on all popular web browsers that include Google chrome browser, Mozilla Firefox, apple safari, and Microsoft edge.
- CMS-Friendly: Built to seamlessly fit into most CMS platforms including WordPress, Joomla or any other custom HTML based environment.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Video Tutorial
Steps to Build Gallery
Follow these simple steps to implement the Smooth Quad Image Gallery into your website:
- Create Project Folder: The first step is to make a new project folder that will contain all the files.
- Create Images Folder: Inside your project folder there should be the subfolder with the name “images”, where you should place the images you are going to show in the gallery.
- Create index.html: Make an HTML document with the name index.html. This will be the main file which will have the structure holding the gallery.
- Create style.css: In the same folder as the html files create a CSS file to control the styling of the page and title it style.css.
- Create script.js: Set the script as script.js for containing various functionalities of the interactive gallery.
- Copy & Paste the Code: Now, you just paste the following source code in your files. You will be ready with your own gallery in a matter of minutes.
HTML
Here is the HTML code for your index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quad Image Gallery | JV Codes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="quad">
<figure>
<img src="images/dragon fruit.jpg">
<figcaption>Exotic, vibrant, refreshing</figcaption>
</figure>
<figure>
<img src="images/figs.jpg">
<figcaption>Soft, sweet, earthy</figcaption>
</figure>
<figure>
<img src="images/mangoes.jpg">
<figcaption>Tropical, golden, aromatic</figcaption>
</figure>
<figure>
<img src="images/strwberry.jpg">
<figcaption>Juicy, sweet, red</figcaption>
</figure>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
Here is the complete code for style.css file to style the gallery:
body {
font-family: Avenir, sans-serif; margin: 0;
background-color: rgb(39, 39, 39);
padding-top: 100px;
}
div#quad {
background-color: #000;
font-size: 0; width: 60%;
margin: 0 auto;
box-shadow: 0 0 12px rgba(0,0,0,0.8);
}
div#quad figure {
margin: 0; width: 50%;
height: auto; transition: 1s;
display: inline-block;
position: relative; overflow: hidden;
}
div#quad figure:hover { cursor: pointer; z-index: 4; }
div#quad figure img { width: 100%; height: auto; }
div#quad figure:nth-child(1) { transform-origin: top left; }
div#quad figure:nth-child(2) { transform-origin: top right; }
div#quad figure:nth-child(3) { transform-origin: bottom left; }
div#quad figure:nth-child(4) { transform-origin: bottom right; }
div#quad figure figcaption {
margin: 0; opacity: 0;
background: rgba(0,0,0,0.3);
color: #fff; padding: .3rem;
font-size: 1.2rem;
position: absolute;
bottom: 0; width: 100%;
transition: 1s 1s opacity;
}
.expanded { transform: scale(2); z-index: 5; }
div#quad figure.expanded figcaption { opacity: 1; }
div.full figure:not(.expanded) { pointer-events: none; }
JavaScript
Here is the complete code for script.js file to function the gallery:
var quadimages = document.querySelectorAll("#quad figure");
for(i=0; i<quadimages.length; i++) {
quadimages[i].addEventListener('click', function(){ this.classList.toggle("expanded"); quad.classList.toggle("full") });
}
Download Source Code
Simply click the button below and you will be able to download the full HTML, CSS, JavaScript source code for the Smooth Quad Image Gallery.
All the files needed including images are totally free with no copyright on any of the files. There are no restrictions on using this code either for personal or commercial projects.
Conclusion
HTML, CSS, JavaScript Smooth Quad Image Gallery – is a great option for adding eye-popping and engaging feature to the website. With this code, you can boost your online visibility regardless of whether your website is built using WordPress or custom HTML.
You can use this code legally and of course, it is required that you link back to my website for acknowledging that this code is from JV Source Codes.
Also check these valuable galleries:
