Streama UPDATE » Nicolai Palmkvist

CSS code from Youtube tutorial

Elementor Vertical
Image Carousel CSS

CSS code used in video:

Step 1 - Add this to column 1

				
					selector {
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    overflow: hidden;
    max-height: 800px;
    height: 800px;
    width: 200px;
}

.image {
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(214.99999999999997, 238.99999999999997, 66.99999999999997, 0.17);
}
.image img {
    height: 247.6px;
    object-fit: cover;
    
}

#column1 {
    animation: scroll-vertical-col-1 45s linear infinite;
}

@keyframes scroll-vertical-col-1 {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-139%);
    }
}

Step 2 - Add this to column 2

				
					selector {
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    overflow: hidden;
    max-height: 800px;
    height: 800px;
}

#column2{
    animation: vertical-scroll-reverse 50s linear infinite reverse;
}

@keyframes vertical-scroll-reverse{
0% {
    transform: translateY(0);
}
100% {
    transform: translateY(-50.2%);
}
}

Step 3 - Add this to column 3

				
					selector {
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
    overflow: hidden;
    max-height: 800px;
    height: 800px;
    width: 200px;
}


#column3 {
    animation: scroll-vertical 50s linear infinite;
}

@keyframes scroll-vertical {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-50.6%);
    }
}

Make it responsive (add to entire page custom css):

				
					
@media only screen and (max-width: 360px) {
    #column1, #column2, #column3 {
        width: 100px;
        height: 350px;
        max-height: 350px;
    }
}