Responsive Stacked Overlapping images with hover
Responsive Stacked Overlapping images with hover
Posted inCSS CSS3 HTML

Responsive Stacked / Overlapping Images with Hover Effect | Pure HTML & CSS

In this tutorial, you’ll learn how to create responsive stacked (overlapping) images with a smooth hover effect using pure HTML and CSS — no JavaScript required.

This modern UI design is perfect for:

  • Portfolio websites
  • Image galleries
  • Team sections
  • Creative landing pages

We’ll cover:
✔ Responsive overlapping image layout
✔ CSS hover animations
✔ Clean & modern UI design
✔ Mobile-friendly approach

💡 Best for beginners and intermediate front-end developers

HTML:

Create a HTML file and add the following code:

<div class="container">
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
</div>

<div class="container reverse">
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
</div>

<div class="container">
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
  <img src="https://codewithubes.in/cloud-images/slider/150.jpeg" />
</div>

CSS:

Create a CSS file and add the following code:

@property --_m {syntax: "<length>";inherits: true;initial-value: 0px}
.container {
  --s: 120px; 
  --g: 14px; 
  display: flex; 
  container-type: inline-size;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); margin: 50px max(1em, 50% - 350px);
}
.container img {
  width: var(--s); 
  aspect-ratio: 1; 
  border-radius: 50%;
  --_m: min((100cqw - sibling-count()*var(--s))/(sibling-count() - 1),var(--g));
  transition: --_m .3s linear; cursor: pointer;
}
.container:not(.reverse) img {
  margin-right: var(--_m);
  mask: radial-gradient(50% 50% at calc(150% + var(--_m)), #0000 calc(100% - 1px + var(--g)),#000 calc(100% + var(--g)));
}
.container.reverse img {
  margin-left: var(--_m);
  mask: radial-gradient(50% 50% at calc(-50% - var(--_m)), #0000 calc(100% - 1px + var(--g)),#000 calc(100% + var(--g)));
}
.container:not(.reverse) img:last-child,
.container.reverse img:first-child { 
  mask: none; 
  margin: 0; 
}
.container:not(.reverse):has(:not(:last-child):hover) img:not(:hover),
.container.reverse:has(:not(:first-child):hover) img:not(:hover) {
  --_m: min((100cqw - var(--g) - sibling-count()*var(--s))/(sibling-count() - 2),var(--g));
}
.container img:hover { 
  --_m: var(--g); 
}
html { 
  background: #D1F2A5; 
}

html #css #webdesign #frontend #csshover #cssanimation #responsivedesign #uidesign #webdevelopment #purecss

Happy coding!

Tags: