3dhouseofficial.com/src/components/Artitect3D.astro

---
const img3DArtitect = [{ image_src: "/assets/3d_artitec/3dap_1.jpeg" },{ image_src: "/assets/3d_artitec/3dap_2.jpeg" },{ image_src: "/assets/3d_artitec/3dap_3.jpeg" },{ image_src: "/assets/3d_artitec/3dap_4.jpeg" },{ image_src: "/assets/3d_artitec/3dap_5.jpeg" },{ image_src: "/assets/3d_artitec/3dap_6.jpeg" },{ image_src: "/assets/3d_artitec/3dap_7.jpeg" },{ image_src: "/assets/3d_artitec/3dap_8.jpeg" },{ image_src: "/assets/3d_artitec/3dap_9.jpeg" },{ image_src: "/assets/3d_artitec/3dap_10.jpeg" },{ image_src: "/assets/3d_artitec/3dap_11.jpeg" },{ image_src: "/assets/3d_artitec/3dap_12.jpeg" },{ image_src: "/assets/3d_artitec/3dap_13.jpeg" },{ image_src: "/assets/3d_artitec/3dap_14.jpeg" },{ image_src: "/assets/3d_artitec/3dap_15.jpeg" },{ image_src: "/assets/3d_artitec/3dap_16.jpeg" },{ image_src: "/assets/3d_artitec/3dap_17.jpeg" },{ image_src: "/assets/3d_artitec/3dap_18.jpeg" },{ image_src: "/assets/3d_artitec/3dap_19.jpeg" },{ image_src: "/assets/3d_artitec/3dap_20.jpeg" },{ image_src: "/assets/3d_artitec/3dap_21.jpeg" },{ image_src: "/assets/3d_artitec/3dap_22.jpeg" },{ image_src: "/assets/3d_artitec/3dap_23.jpeg" },{ image_src: "/assets/3d_artitec/3dap_24.jpeg" },{ image_src: "/assets/3d_artitec/3dap_25.jpeg" },{ image_src: "/assets/3d_artitec/3dap_26.jpeg" },{ image_src: "/assets/3d_artitec/3dap_27.jpeg" },{ image_src: "/assets/3d_artitec/3dap_28.jpeg" },{ image_src: "/assets/3d_artitec/3dap_29.jpeg" },{ image_src: "/assets/3d_artitec/3dap_30.jpeg" },{ image_src: "/assets/3d_artitec/3dap_31.jpeg" },{ image_src: "/assets/3d_artitec/3dap_32.jpeg" },{ image_src: "/assets/3d_artitec/3dap_33.jpeg" },{ image_src: "/assets/3d_artitec/3dap_34.jpeg" },{ image_src: "/assets/3d_artitec/3dap_35.jpeg" },{ image_src: "/assets/3d_artitec/3dap_36.jpeg" },{ image_src: "/assets/3d_artitec/3dap_37.jpeg" },{ image_src: "/assets/3d_artitec/3dap_38.jpeg" },{ image_src: "/assets/3d_artitec/3dap_39.jpeg" },{ image_src: "/assets/3d_artitec/3dap_40.jpeg" }];
---
<div class=" container mx-auto">
    <div class="page-head">
      <h1 class="text-center text-[20px] font-bold mb-4"><span class="bg-[#000]/60 py-3 px-6 rounded-lg ">Architecture Planning</span></h1>
    <div class="demo-gallery">

      <ul id="lightgallery2">
        {img3DArtitect.map((data: {image_src: string | undefined;})=>
          <li class="w-full md:w-[300px]" data-responsive={`${data.image_src} 375, ${data.image_src} 480, ${data.image_src} 800`} data-src={data.image_src}
            data-sub-html=" ">
          <a href="">
            <div class="w-full md:w-[400px] h-[400px]">
              <img class="img-responsive" src={data.image_src}>
            </div>
            <div class="demo-gallery-poster">
              <img src="https://sachinchoolur.github.io/lightgallery.js/static/img/zoom.png">
            </div>
          </a>
        </li>
        )}
      </ul>
    </div>
  </div>
  <script is:inline src="/assets/lightgallery.min.js"></script>
  <link rel="stylesheet" href="/assets/lightgallery.min.css">

<script is:inline>
    lightGallery(document.getElementById('lightgallery2'))
</script>
<style>


.demo-gallery > ul {
  margin-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
}

.demo-gallery > ul > li {
  margin-bottom: 15px;
  display: inline-block;
  list-style: outside none none;
  background-color: #fff;
}

.demo-gallery > ul > li a {
  border: 3px solid #FFF;
  border-radius: 3px;
  display: block;
  overflow: hidden;
  position: relative;
}

.demo-gallery > ul > li a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}

.demo-gallery > ul > li a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery > ul > li a:hover .demo-gallery-poster > img {
  opacity: 1;
}

.demo-gallery > ul > li a .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}

.demo-gallery > ul > li a .demo-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}

.demo-gallery > ul > li a:hover .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}

.demo-gallery .justified-gallery > a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}

.demo-gallery .justified-gallery > a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}

.demo-gallery .justified-gallery > a:hover .demo-gallery-poster > img {
  opacity: 1;
}

.demo-gallery .justified-gallery > a .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}

.demo-gallery .justified-gallery > a .demo-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;


}

.demo-gallery .justified-gallery > a:hover .demo-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}

.demo-gallery .video .demo-gallery-poster img {
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  opacity: 0.8;
  width: 48px;
}

.demo-gallery.dark > ul > li a {
  border: 3px solid #04070a;
}
  </style>