Tailwind CSS Gallery

Gallery section with transform image

These tailwind CSS Gallery section used to heading and transform image layout with slider.

Preview
Code

                                                <!-- Custom Style -->
    <style>
    .gallery-top .swiper-slide {
        height: fit-content;
        margin-right: 0px;
    }
    .swiper-wrapper{  
      
  }
  .gallery-top .swiper-slide-active {
    transform: scale(1.1);
  }      
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    content: ' ';
}
.swiper-button-next svg, .swiper-button-prev svg{
    width: 20px;
    height: 20px;
}
.swiper-button-next, .swiper-button-prev{
  
  margin-top: 1px;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: auto;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: 10;
}

.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
  bottom: var(--swiper-pagination-bottom,px);
  z-index: 10;
  color: transparent;
  left: 14px;
}
.swiper-pagination-current{
  color: black;
}
.gallery-top .swiper-slide .swiper-box {
  opacity: 0;
  transform: scale(1);
}
.gallery-top .swiper-slide-active .swiper-box {
  transform: scale(0.9);
  opacity: 1;
}
@media (max-width: 1920px){
  .gallery-top .swiper-slide-active .swiper-box{
    opacity: 1;
  }
} 

 </style>
 <section class="py-24 ">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 overflow-hidden">
          <div class="pb-16">
            <h2 class="w-full text-center text-gray-900 text-4xl font-bold font-manrope leading-loose pb-2.5">Our Gallery</h2>
            <p class="w-full text-center text-gray-600 text-lg font-normal leading-8">Explore the essence of beauty in our gallery's intimate space.</p>
          </div>
        
              <!--Slider Wrapper-->
           <div class="mx-auto w-auto relative">
              <button id="slider-button-left" class="top-[35%] swiper-button-prev w-11 h-11 p-3 xl:flex hidden shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] items-center justify-center border border-gray-300 rounded-lg group hover:bg-gray-900 transition-all duration-700 ease-in-out">
                <svg class="text-gray-900 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M12.5002 14.9999L7.50005 9.99973L12.5032 4.99658" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </button>
              <div class="swiper-container gallery-top w-full md:w-[1028px] mx-auto xl:overflow-hidden pt-6">
                <div class="swiper-wrapper w-max mx-auto mb-5 flex gap-3">
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0 w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712568734.png" alt="Watch image" />
                                  
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Golden&Sliver Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>      
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0 w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712569721.png" alt="Watch image" />
                                
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Golden Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0  w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712568744.png" alt="Watch image" />
                                    
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Sliver Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>
                  <div class="swiper-slide max-w-[319px] grid">
                  <img class="grow shrink basis-0 w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712568734.png" alt="Watch image" />
                                
                  <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                      <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Golden&Sliver Metal Belt Watch </h5>
                      <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                  </div>
                  </div>
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0 w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712569721.png" alt="Watch image" />
                                
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Golden Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0 w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712568734.png" alt="Watch image" />
                                  
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Golden&Sliver Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>      
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0 w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712569721.png" alt="Watch image" />
                                
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Golden Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0  w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712568744.png" alt="Watch image" />
                                    
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Sliver Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>
                  <div class="swiper-slide max-w-[319px] grid">
                    <img class="grow shrink basis-0  w-full rounded-xl object-cover" src="https://pagedone.io/asset/uploads/1712568744.png" alt="Watch image" />
                                    
                    <div class="swiper-box mx-auto relative flex-col justify-center items-center gap-1 flex mt-5">
                        <h5 class="w-full text-center text-gray-900 text-xl font-medium leading-loose">Sliver Metal Belt Watch </h5>
                        <p class="w-full text-center text-gray-600 text-base font-normal leading-relaxed">a chic and understated accessory for any occasion.</p>
                    </div>
                  </div>
                </div>
              </div>
              <button id="slider-button-right" class="swiper-button-next top-[35%] xl:flex hidden shadow-[0px_1px_2px_0px_rgba(16,_24,_40,_0.05)] w-11 h-11 items-center justify-center border border-gray-300 rounded-lg group  transition-all duration-700 ease-in-out hover:bg-gray-900">
                <svg class="text-gray-900 group-hover:text-white" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <path d="M7.50301 4.99637L12.5032 9.99657L7.50006 14.9997" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
              </button>
            </div>
  </div>

      </section>
  <!-- Initialize Swiper -->
  <script>
$(document).ready(function() {
  // Assign some jquery elements we'll need
  var $swiper = $(".gallery-top");
  var $bottomSlide = null; // Slide whose content gets 'extracted' and placed
  // into a fixed position for animation purposes
  var $bottomSlideContent = null; // Slide content that gets passed between the
  // panning slide stack and the position 'behind'
  // the stack, needed for correct animation style

  var mySwiper = new Swiper(".gallery-top", {
    spaceBetween: 20,
    slidesPerView: 3,
    parallax: true,
    centeredSlides: true,
    loop: true,
    autoplay: true,
    autoplaySpeed: 20,
    slideToClickedSlide: true,
    paginationClickable: true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    breakpoints: {
         1920: {
          slidesPerView: 3,
           spaceBetween: 20,
         },
         1400: {
           slidesPerView: 3,
           spaceBetween: 20,
           centeredSlides: true
         },
         900: {
           slidesPerView: 3,
           spaceBetween: 15,
           centeredSlides: true
         },
         200: {
           slidesPerView: 2,
           spaceBetween: 15
         }
    },
  });
});

  </script>

HTML Copy

Gallery section with lightbox image

These tailwind CSS Gallery section used to heading and navigation image for slider.

Preview
Code

Figma File

                                                <!-- Custom Style -->
    <style>
      .nav-for-slider .swiper-slide {
        cursor: pointer;
        margin-right: 0 !important;
      }
      .swiper-wrapper {
        height: auto;
      }
      .nav-for-slider .swiper-slide img {
        border: 2px solid transparent;
        border-radius: 28px;
      }
      .nav-for-slider .swiper-slide-thumb-active img {
        border-color: rgb(79 70 229);
      }
      
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow:hidden;
  background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-image {
  display: block;
  margin: auto;
  max-width: 100%;
 max-height: 100%;
}
.close {
  color: #fff;
  font-size: 3em;
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
}
.gallery {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
.gallery img {
  max-width: 100%;
  cursor: pointer;
}
.gallery img:hover {
  max-width: 100%;
  cursor: pointer;
}
    </style>
     <section class="py-24 relative">
      <div class="mx-auto max-w-7xl px-4 sm:px-5 lg:px-6">
        <div class="mb-16">
            <h2 class="w-full text-center text-gray-900 text-4xl font-bold font-manrope leading-normal pb-2.5">Our Gallery</h2>
            <p class="w-full text-center text-gray-600 text-lg font-normal leading-8">Explore the essence of beauty in our gallery's intimate space.</p>
        </div>
        <div class="flex flex-col-reverse  gap-8 mx-auto">
          
            <div class="slider-box flex flex-col xl:flex-row gap-8">
             
              <div class="box xl:w-[1062px] w-full gallery">
                <div class="swiper main-slide-carousel swiper-container relative">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943683.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                   
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943709.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943720.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block xl:w-[1062px] w-full mx-auto h-[627px] rounded-3xl">
                        <img src="https://pagedone.io/asset/uploads/1713943731.png" alt="Gallery image" class="gallery-image w-full h-full mx-auto rounded-3xl object-cover"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="xl:w-[126px] w-full">
                <div class="nav-for-slider">
                  <div class="swiper-wrapper justify-center md:gap-7 gap-4 xl:flex-col">
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]">
                      <img src="https://pagedone.io/asset/uploads/1713943683.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]">
                      <img src="https://pagedone.io/asset/uploads/1713943709.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]" >
                      <img src="https://pagedone.io/asset/uploads/1713943720.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>
                    <div class="swiper-slide thumbs-slide lg:!w-[126px] md:!h-[135px] w-full h-[110px]">
                      <img src="https://pagedone.io/asset/uploads/1713943731.png" alt="Gallery image" class="gallery-image w-full cursor-pointer h-full rounded-2xl border-2 border-gray-200 transition-all duration-500 hover:border-indigo-600 object-cover"/>
                    </div>                   
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lightbox" id="lightbox">
          <span class="close" id="close">&times;</span>
          <img src="" alt="" class="lightbox-image" id="lightbox-image">
        </div>
      </div>
    </section>  
  <!-- Custom Slider -->
    <script>
      var swiper_thumbs = new Swiper(".nav-for-slider", {
        loop: true,
        spaceBetween: 30,
        slidesPerView: 4,
      });
      var swiper = new Swiper(".main-slide-carousel", {
        slidesPerView: 1,
        effect: "fade",
        thumbs: {
          swiper: swiper_thumbs,
        },
      });
      
// Get references to elements
const gallery = document.querySelector('.gallery');
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightbox-image');
const closeButton = document.getElementById('close');

// Add event listener to each image
gallery.addEventListener('click', e => {
  if (e.target.classList.contains('gallery-image')) {
    const imageSrc = e.target.src;
    lightboxImage.src = imageSrc;
    lightbox.style.display = 'flex';
  }
});

// Close lightbox when close button is clicked
closeButton.addEventListener('click', () => {
  lightbox.style.display = 'none';
});

// Close lightbox when clicking outside the image
lightbox.addEventListener('click', e => {
  if (e.target === lightbox) {
    lightbox.style.display = 'none';
  }
});
    </script>

HTML Copy

Gallery section with grid layout

These tailwind CSS Gallery section used to heading and grid layout image with Lightbox.

Preview
Code

Figma File

                                                <!-- Custom Style -->
<style>
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow:hidden;
  background-color: rgba(0, 0, 0, 0.8);
}
.lightbox-image {
  display: block;
  margin: auto;
  max-width: 100%;
 max-height: 100%;
}
.close {
  color: #fff;
  font-size: 3em;
  position: absolute;
  top: 20px;
  right: 30px;
  cursor: pointer;
}
.gallery {
  width: 90vw;
  max-width: 1200px;
  margin: 0 auto;
  grid-template-rows: 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  
}
.gallery img {
  max-width: 100%;
  cursor: pointer;
}
.gallery img:hover {
  max-width: 100%;
  cursor: pointer;
}
</style>
 <section class="py-24 ">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 ">
        <div class="grid gap-2.5 lg:pb-16 pb-10">
          <h2 class="w-full text-center text-gray-900 text-4xl font-bold font-manrope leading-normal">Our Gallery</h2>
          <div class="w-full text-center text-gray-600 text-lg font-normal leading-8">Step into a realm where art comes to life.</div>
        </div>
            <div class="gallery">
              <div class="flex flex-col mb-10">
                <div class="grid md:grid-cols-12 gap-8 lg:mb-11 mb-7">
                  <div class="md:col-span-4 md:h-[404px] h-[277px] w-full rounded-3xl">
                      <img src="https://pagedone.io/asset/uploads/1713942989.png" alt="Gallery image" class="gallery-image object-cover rounded-3xl hover:grayscale transition-all duration-700 ease-in-out mx-auto lg:col-span-4 md:col-span-6 w-full h-full">
                    </div>
                    <div class="md:col-span-8 md:h-[404px] h-[277px] w-full rounded-3xl">
                      <img src="https://pagedone.io/asset/uploads/1713943004.png" alt="Gallery image" class="gallery-image object-cover rounded-3xl hover:grayscale transition-all duration-700 ease-in-out mx-auto lg:col-span-8 md:col-span-6 w-full h-full">
                    </div>
                </div>
                <div class="grid md:grid-cols-3 grid-cols-1 gap-8">
                  <div class="h-[277px] w-full rounded-3xl">
                    <img src="https://pagedone.io/asset/uploads/1713943024.png" alt="Gallery image" class="gallery-image object-cover rounded-3xl hover:grayscale transition-all duration-700 ease-in-out mx-auto w-full h-full">
                  </div>
                  <div class="h-[277px] w-full rounded-3xl">
                    <img src="https://pagedone.io/asset/uploads/1713943039.png" alt="Gallery image" class="gallery-image object-cover rounded-3xl hover:grayscale transition-all duration-700 ease-in-out mx-auto w-full h-full">
                  </div>
                  <div class="h-[277px] w-full rounded-3xl">
                    <img src="https://pagedone.io/asset/uploads/1713943054.png" alt="Gallery image" class="gallery-image object-cover rounded-3xl hover:grayscale transition-all duration-700 ease-in-out mx-auto w-full h-full">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lightbox" id="lightbox">
            <span class="close" id="close">&times;</span>
            <img src="" alt="" class="lightbox-image" id="lightbox-image">
          </div>
        </div>
    </section>
<!-- Initialize Swiper -->
<script>
  // Get references to elements
  const gallery = document.querySelector('.gallery');
  const lightbox = document.getElementById('lightbox');
  const lightboxImage = document.getElementById('lightbox-image');
  const closeButton = document.getElementById('close');

  // Add event listener to each image
  gallery.addEventListener('click', e => {
    if (e.target.classList.contains('gallery-image')) {
      const imageSrc = e.target.src;
      lightboxImage.src = imageSrc;
      lightbox.style.display = 'flex';
    }
  });

  // Close lightbox when close button is clicked
  closeButton.addEventListener('click', () => {
    lightbox.style.display = 'none';
  });

  // Close lightbox when clicking outside the image
  lightbox.addEventListener('click', e => {
    if (e.target === lightbox) {
      lightbox.style.display = 'none';
    }
  });
</script>

HTML Copy