Our design Showcase
Filterable Gallery
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.gallery {
display: grid;
grid-gap: 20px;
padding: 20px;
}
.filter {
text-align: center;
margin-bottom: 20px;
}
.filter button {
margin: 5px;
padding: 10px 20px;
background-color: #fff;
color: #000;
border: none;
cursor: pointer;
font-family: “Poppins”, Sans-serif;
}
.filter button:hover {
color: #f8c301;
font-weight: 600;
}
.filter button.clicked {
color: #f8c301;
font-weight: 600;
}
.image {
display: none;
transition: opacity 0.5s ease; /* Added opacity transition property */
}
img, video {
max-width: 100%;
height: auto;
}
.gallery a {
text-decoration: none !important;
color: inherit;
}
.heading {
font-family: “Poppins”, Sans-serif;
font-size: 18px;
font-weight: 600;
color: #000;
padding-top: 10px;
margin: 0px !important;
}
.description {
margin: 0px !important;
color: #7a7a7a;
font-family: roboto, Sans-serif;
}
.image img:hover{
transform: translateY(-8px);
transition: transform 0.3s ease;
}
.image video:hover{
transform: translateY(-8px);
transition: transform 0.3s ease;
}
/* Responsive grid */
@media screen and (min-width: 768px) {
.gallery {
grid-template-columns: repeat(3, minmax(300px, 1fr)); /* 3 images per row on desktop */
}
}
@media screen and (max-width: 767px) {
.gallery {
grid-template-columns: repeat(2, minmax(300px, 1fr)); /* 2 images per row on tablet */
}
}
@media screen and (max-width: 480px) {
.gallery {
grid-template-columns: repeat(1, minmax(300px, 1fr)); /* 1 image per row on mobile */
}
.image {
margin-top: 20px;
}
}
document.addEventListener(“DOMContentLoaded”, function() {
filterSelection(‘all’);
});
function filterSelection(category) {
var images = document.querySelectorAll(‘.image’);
if (category === ‘all’) {
images.forEach(function(image) {
image.style.display = ‘block’;
setTimeout(function() {
image.style.opacity = ‘1’; // Fade in the image after display
}, 10);
});
} else {
images.forEach(function(image) {
image.style.opacity = ‘0’; // Fade out the image before display
setTimeout(function() {
if (image.classList.contains(category)) {
image.style.display = ‘block’;
setTimeout(function() {
image.style.opacity = ‘1’; // Fade in the image after display
}, 10);
} else {
image.style.display = ‘none’;
}
}, 500); // Adjust timing to match transition duration
});
}
}
// Get all buttons
const buttons = document.querySelectorAll(‘button’);
// Add click event listener to each button
buttons.forEach(button => {
button.addEventListener(‘click’, function() {
// Remove ‘clicked’ class from all buttons
buttons.forEach(btn => {
btn.classList.remove(‘clicked’);
});
// Add ‘clicked’ class to the clicked button
this.classList.add(‘clicked’);
});
});
Filterable Gallery
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.gallery {
display: grid;
grid-gap: 20px;
padding: 20px;
}
.filter {
text-align: center;
margin-bottom: 20px;
}
.filter button {
margin: 5px;
padding: 10px 20px;
background-color: #fff;
color: #000;
border: none;
cursor: pointer;
font-family: “Poppins”, Sans-serif;
}
.filter button:hover {
color: #f8c301;
font-weight: 600;
}
.filter button.clicked {
color: #f8c301;
font-weight: 600;
}
.image {
display: none;
transition: opacity 0.5s ease; /* Added opacity transition property */
}
img, video {
max-width: 100%;
height: auto;
}
.gallery a {
text-decoration: none !important;
color: inherit;
}
.heading {
font-family: “Poppins”, Sans-serif;
font-size: 18px;
font-weight: 600;
color: #000;
padding-top: 10px;
margin: 0px !important;
}
.description {
margin: 0px !important;
color: #7a7a7a;
font-family: roboto, Sans-serif;
}
.image img:hover{
transform: translateY(-8px);
transition: transform 0.3s ease;
}
.image video:hover{
transform: translateY(-8px);
transition: transform 0.3s ease;
}
/* Responsive grid */
@media screen and (min-width: 768px) {
.gallery {
grid-template-columns: repeat(3, minmax(300px, 1fr)); /* 3 images per row on desktop */
}
}
@media screen and (max-width: 767px) {
.gallery {
grid-template-columns: repeat(2, minmax(300px, 1fr)); /* 2 images per row on tablet */
}
}
@media screen and (max-width: 480px) {
.gallery {
grid-template-columns: repeat(1, minmax(300px, 1fr)); /* 1 image per row on mobile */
}
.image {
margin-top: 20px;
}
}
document.addEventListener(“DOMContentLoaded”, function() {
filterSelection(‘all’);
});
function filterSelection(category) {
var images = document.querySelectorAll(‘.image’);
if (category === ‘all’) {
images.forEach(function(image) {
image.style.display = ‘block’;
setTimeout(function() {
image.style.opacity = ‘1’; // Fade in the image after display
}, 10);
});
} else {
images.forEach(function(image) {
image.style.opacity = ‘0’; // Fade out the image before display
setTimeout(function() {
if (image.classList.contains(category)) {
image.style.display = ‘block’;
setTimeout(function() {
image.style.opacity = ‘1’; // Fade in the image after display
}, 10);
} else {
image.style.display = ‘none’;
}
}, 500); // Adjust timing to match transition duration
});
}
}
// Get all buttons
const buttons = document.querySelectorAll(‘button’);
// Add click event listener to each button
buttons.forEach(button => {
button.addEventListener(‘click’, function() {
// Remove ‘clicked’ class from all buttons
buttons.forEach(btn => {
btn.classList.remove(‘clicked’);
});
// Add ‘clicked’ class to the clicked button
this.classList.add(‘clicked’);
});
});