I'm working on a unique component design that involves showcasing images in a creative layout, with the first image displayed prominently while the rest form a half-circle around it.
However, I'm facing some issues regarding clipping the portion of the second image using a specific class. The goal is to achieve a visual effect similar to the one illustrated in the attached image below.
Images.js
const Images = ({ images = [] }) => {
return (
<div>
{images?.map((image, index) => {
const isFirst = index === 0;
return (
<img
src={image.url}
alt={image.title}
key={image.title}
className={isFirst ? "" : "semi-circle"}
/>
);
})}
</div>
);
};
export default Images;
style.css
img {
border-radius: 50%;
width: 100px;
height: 100px;
}
.semi-circle {
clip: rect(0px, 25px, 25px, 0px);
}
Could anyone provide insight into what might be going wrong here?
To better understand the intended outcome, check out this reference image: