/* Нормальное состояние блока */
.shadow-square {
  transition: box-shadow 0.3s ease;  /* Плавный переход */
}

/* Эффект тени при наведении */
.shadow-square:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);  /* Настроим тень */
}


.first-image, .second-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Чтобы точно совпадали */
    height: 100%;
    transition: opacity 0.3s ease-in-out;
}

.second-image {
    opacity: 0;
    pointer-events: none; /* Чтобы вторая картинка не блокировала первую */
}

.first-image:hover {
    opacity: 0;
}

.first-image:hover + .second-image {
    opacity: 1;
}