possible to get to get 12 pieces split instead of 4 in circle gallery?

user_4956911 0
Viewed 40

I have some code which displays 4 images as segments within a circle gallery. How can I split the circle into 12 images instead of 4? I tried to add one more part with div but every new image was placed outside of the circle gallery.

Please tell me how I can work with this or if I should try another way to achieve the desired outcome. If there is another way I would appreciate it if you guide me there.

* {
  box-sizing: border-box;
}

body{
  align-items: center;
  background-color: #333;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  min-height: 500px;
  min-width: 500px;
  transform: rotate(45deg);
}

.photo {
  position: relative;
  background-size: cover;
  flex: 50%;
  overflow: hidden;
  transition: transform .3s ease-out;
}

img {
  position: absolute;
  top: -190px;
  left: -90px;
  transform: rotate(-45deg);
}

.photo-1 {
  border-top-left-radius: 100%;
}
.photo-1:hover {
    transform: translate(-25px, -25px) scale(1.08);
}

.photo-2 {
  border-top-right-radius: 100%;
}
.photo-2:hover {
    transform: translate(25px, -25px) scale(1.08);
}

.photo-3 {
  border-bottom-left-radius: 100%;
}
.photo-3:hover {
    transform: translate(-25px, 25px) scale(1.08);
}

.photo-4 {
  border-bottom-right-radius: 100%;
}
.photo-4:hover {
    transform: translate(25px, 25px) scale(1.08);
}

.photo-5{
  border-top-left-radius: 100%;
}
.photo-5:hover {
    transform: translate(25px, 25px) scale(1.08);
}
<div class="gallery">
  <div class="photo photo-1">
    <img src="https://images.unsplash.com/photo-1461534204375-bd3ba51cca78?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
  <div class="photo photo-2">
    <img src="https://images.unsplash.com/photo-1423483641154-5411ec9c0ddf?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
  <div class="photo photo-3">
    <img src="https://images.unsplash.com/photo-1464454709131-ffd692591ee5?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
  <div class="photo photo-4">
    <img src="https://images.unsplash.com/photo-1479064578521-1eebbb96eca1?w=500&h=500&q=80&fit=crop" alt="" />
  </div>
</div>

image-gallery css html
1 Answers

TL;DR: you will need to change your approach, but an explanation of how the original code works may help you understand why.

The way the existing code works is that there is a 2x2 grid of square images. Each image is then rounded on one of its corners. The whole gallery is rotated, then finally each image is then animated on hover.

This is a relatively simple setup because it's easy to put 4 images in a 2x2 grid. The styling to make them appear in a circle isn't a big job either. However, if you want 12 images you have a more complicated task, because you will need to make all 12 images meet at a single point. You will therefore need to design a way to make them wedges. The original code (with 4 images) didn't have to make the images wedges, because in a 2x2 grid all 4 images naturally meet in the middle anyway. In effect they are already 90 degree wedges just because they're squares.

This leads to the actual answer to your question: you need a more sophisticated approach to exceed 4 images. I would suggest starting by styling a single image so that it appears as a 30 degree wedge, then putting 12 of them together, but I must admit I don't have a clear idea of how I would create this gallery the way you want it. I hope the explanation of how the existing code works will help you to break down the problem and make progress with it.

user_40511810
Related