
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;
}
}
Extra:
Background color code: #0F0F1C
Yellow color code: #D7EF43
Want more helpful tutorials?

Elementor free
Create a Wave Hover Effect in Your Elementor Gallery with Elementor Free
Are you looking to add a creative touch to your Elementor gallery using only the free version of Elementor? In this tutorial, I’ll show you
10/04/2024

Elementor free
Mastering a Rotating Video Gallery with Elementor and GSAP ScrollTrigger
Are you ready to elevate your web design skills and impress your visitors with stunning animations? In my latest video, I demonstrate how to create
09/02/2024

Elementor GSAP
Master GSAP Elementor Image Expand Effect
If you’re looking to elevate your web design skills using GSAP Elementor, you’re in the right place! In my latest YouTube video, I delve into
08/23/2024