Interactive Diamond Image Gallery with JavaScript and CSS/CSS3

This is a JavaScript/CSS-powered gallery that presents your images in overlapping diamond grids. Ideal for portfolios, product displays, or any website seeking a non-traditional gallery format.

Diamonds (images) further from the center appear smaller, while the central image is the largest. Users can click any image to enlarge it and smoothly move it to the center. Clicking the central image will toggle the gallery between expanded and collapsed views.

How to use it:

1. Insert your images into the diamond gallery. Replace the example image URLs (src attribute) with your own. The --i attribute within each image div acts as an index, starting from 1 and incrementing for each image. Adjust the --total attribute on the gallery div to match your total image count.

<div class="scene">
  <div class="gallery" style="--total: 7">
    <div class="image" style="--i: 1">
      <img src="1.jpg" alt="image 1">
    </div>
    <div class="image" style="--i: 2">
      <img src="2.jpg" alt="image 2">
    </div>
    <div class="image" style="--i: 3">
      <img src="3.jpg" alt="image 3">
    </div> 
    ...
    <div class="image" style="--i: 7">
      <img src="7.jpg" alt="image 7">  
    </div> 
  </div>
</div>

2. Apply CSS styles to the gallery. This styling positions the images in a diamond shape, applying rotation and 3D transformations to arrange and animate each image within the gallery.

.gallery {
  position: relative;
  perspective: 1500px;
  transform-style: preserve-3d;
  width: 200px;
  aspect-ratio: 1;
  background: silver;
  transform: rotate(45deg);
}
.gallery .image {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid white;
  box-sizing: border-box;
  transition: 1s ease;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: calc(var(--total) - var(--i));
  overflow: hidden;
}
.gallery .image img {
  --rotate: rotate(-45deg);
  transform: var(--rotate);
  transition: .3s ease;
}
.gallery .image:nth-of-type(odd) {
  --hovermove: -100px, 100px;
  --translate: calc((var(--i) - 1) * -70px), calc((var(--i) - 1) * 70px);
  --tZ: calc((var(--i) - 1) * -350px);
  animation: deploy 1.5s ease forwards;
} 
.gallery .image:nth-of-type(even) {
  --hovermove: 100px, -100px;
  --translate: calc(var(--i) * 70px), calc(var(--i) * -70px);
  --tZ: calc(var(--i) * -350px);
  animation: deploy 1.5s ease forwards;
}
.gallery .image:hover img,
.gallery .image.only-hover img {
  transform: var(--rotate) scale(1.1);
}
.gallery .image.only-hover{
  animation: clickAnimation 1s ease;
  z-index: 9;
}
.gallery.hidden-gallery .image {
  animation: close 1.5s ease forwards;
}
@keyframes deploy {
  from {
    transform: translate(0px, 0px) translateZ(0px);
  }
  to {
    transform: translate(var(--translate)) translateZ(var(--tZ));
  }
}
@keyframes close {
  from {
    transform: translate(var(--translate)) translateZ(var(--tZ));
  }
  to {
    transform: translate(0px, 0px) translateZ(0px);
  }
}
@keyframes clickAnimation {
  0% {
    transform: translate(var(--translate)) translateZ(var(--tZ));
  }
  20% {
    transform: translate(var(--hovermove)) translateZ(0px);
  }
  100% {
    transform: translate(calc(var(--i) * 0px), calc(var(--i) * 0px));
  }
}

3. Add the JavaScript code to activate the diamond gallery. This script lets users click images to bring them to the center of the screen and handle animations:

const images = document.querySelectorAll('.image');
images.forEach(function(image, i) {
  image.addEventListener('click', function() {
    const isActive = this.classList.contains('only-hover');
    images.forEach(function(img) {
      img.classList.remove('only-hover');
    });
    if (i !== 0 & !isActive) {
      this.classList.add('only-hover');
    } else if (i == 0) {
      this.closest('.gallery').classList.toggle('hidden-gallery');
    }
  });
});

How it works:

The gallery functions through three main components:

CSS Transformations:

• The gallery container rotates 45 degrees to create the diamond shape
• Images counter-rotate -45 degrees to maintain proper orientation
• CSS variables control positioning and animation states

Layout System:

• Images position through absolute positioning
• Z-index values create depth based on image position
• Transform translations control spacing between images

JavaScript Interactions:

• Click handlers manage state changes
• Class toggling controls animations
• Position calculations determine image movement