Responsive Circular List of images with hover effect
Responsive Circular List of images with hover effect
Posted inCSS CSS3 HTML

Responsive Circular Image List with Hover Effect | HTML & CSS Only

Create a responsive circular list of images with a smooth hover effect using pure HTML and CSS—no JavaScript required!

In this tutorial, you’ll learn how to arrange images in a perfect circular layout, apply modern hover animations, and make the design fully responsive for all screen sizes. This effect is perfect for team sections, portfolios, galleries, and creative UI designs.

🔥 What You’ll Learn:

  • Circular image layout using CSS
  • Hover effects with smooth transitions
  • Fully responsive design
  • Clean & beginner-friendly HTML + CSS
  • Modern UI styling techniques

👉 Like, Share & Subscribe for more web design and frontend development tutorials!

HTML:

Create a HTML file and add the following code:

<div class="container">
  <img src="https://codewithubes.in/cloud-images/slider/1.jpeg">
  <img src="https://codewithubes.in/cloud-images/slider/2.jpeg">
  <img src="https://codewithubes.in/cloud-images/slider/3.jpeg">
  <img src="https://codewithubes.in/cloud-images/slider/4.jpeg">
  <img src="https://codewithubes.in/cloud-images/slider/5.jpeg">
  <img src="https://codewithubes.in/cloud-images/slider/6.jpeg">
  <img src="https://codewithubes.in/cloud-images/slider/7.jpeg">
  <img src="https://codewithubes.in/cloud-images/slider/8.jpeg">
</div>

CSS:

Create a CSS file and add the following code:

@property --_i {syntax: "<angle>";initial-value: 0deg;inherits: false}
@property --_j {syntax: "<angle>";initial-value: 0deg;inherits: false}
.container {
  --s: 100px; 
  --g: 12px;
  display: grid; 
  place-content: center; 
  aspect-ratio: 1;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);
  width: 350px; 
  container-type: inline-size;
}
.container img {
  grid-area: 1/1; 
  width: var(--s); 
  aspect-ratio: 1;
  border-radius: 50%; 
  cursor: pointer;
  --_r: min(50cqw - var(--s)/2,(var(--s) + var(--g))/(2*sin(.5turn/sibling-count())));
  --_i: calc(1turn*sibling-index()/sibling-count() + var(--_ii,0deg));
  --_j: calc(1turn*(sibling-index() + 1)/sibling-count() + var(--_jj,0deg));
  --_a: calc(2*asin((var(--s) + var(--g))/(2*var(--_r))) - 1turn/sibling-count());
  transform: rotate(calc(-1*var(--_i))) translate(var(--_r)) rotate(var(--_i));
  mask: radial-gradient(50% 50% at calc(50% + var(--_r)*(cos(var(--_j)) - cos(var(--_i)))) calc(50% + var(--_r)*(sin(var(--_i)) - sin(var(--_j)))), #0000 calc(100% - 1px + var(--g)),#000 calc(100% + var(--g)));
  transition: --_i .3s linear,--_j .3s linear;
}
.container:has(:hover) img {
  --_ii: var(--_a); 
  --_jj: var(--_a);
}
.container img:hover {
  --_ii: 0deg; 
  z-index: 1;
}
.container img:has(+ :hover),
.container:has(:first-child:hover) img:last-child {
  --_jj: 0deg;
}
body {
  display: flex; 
  place-content: center;
  flex-wrap: wrap; 
  gap: 1em;
  background: #FF6B6B;
}

html #css #hovereffect #circulardesign #frontend #webdesign #cssanimation #responsive #uidesign #htmlcss #purecss #frontenddeveloper

Happy coding!

Tags: