.image-scroll-hover-gallery {
    display: grid;
    gap: 20px;
    transition: grid-template-columns 0.5s ease;
}

.image-item {
    width: 100%;
    height: 400px;  /* Fixed height for the container */
    overflow: hidden;
    position: relative;
}

.image-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-item {
    overflow: hidden;
    position: relative;
    height: 400px;  /* Fix container height */
}

.image-item img {
    transition: transform 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.image-item:hover img {
    transform: translateY(-100%); /* Scroll top-to-bottom */
}