.circle-container {
    position: relative;
    width: 400px;
    height: 400px;
    animation: zoom-in 1.2s ease-out forwards;
    overflow: visible !important;
}

.circle-container .item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease, top 0.6s ease, left 0.6s ease;
    text-align: center;
    color: #fff;
    font-family: sans-serif;
    overflow: visible;
}

.circle-container .item img {
    width: 100%;
    height: 100%;
}

.circle-container .caption {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Animation */
@keyframes zoom-in {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Positions */
.circle-container .item:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg) translate(120px) rotate(0deg);
}
.circle-container .item:nth-child(2) {
    transform: translate(-50%, -50%) rotate(72deg) translate(120px) rotate(-72deg);
}
.circle-container .item:nth-child(3) {
    transform: translate(-50%, -50%) rotate(144deg) translate(120px) rotate(-144deg);
}
.circle-container .item:nth-child(4) {
    transform: translate(-50%, -50%) rotate(216deg) translate(120px) rotate(-216deg);
}
.circle-container .item:nth-child(5) {
    transform: translate(-50%, -50%) rotate(288deg) translate(120px) rotate(-288deg);
}

/* Hover */
.circle-container:hover .item:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg) translate(170px) rotate(0deg);
}
.circle-container:hover .item:nth-child(2) {
    transform: translate(-50%, -50%) rotate(72deg) translate(170px) rotate(-72deg);
}
.circle-container:hover .item:nth-child(3) {
    transform: translate(-50%, -50%) rotate(144deg) translate(170px) rotate(-144deg);
}
.circle-container:hover .item:nth-child(4) {
    transform: translate(-50%, -50%) rotate(216deg) translate(170px) rotate(-216deg);
}
.circle-container:hover .item:nth-child(5) {
    transform: translate(-50%, -50%) rotate(288deg) translate(170px) rotate(-288deg);
}

.circle-container:hover .caption {
    opacity: 1;
}