Trigger animation of one element with hover on another element#
.banner:has(.product:hover) .rock img:nth-child(3){
transform: translateX(100px) translateY(100px);
}
mask-image#
Overlaying images with mask-image can create a soda can effect
Overlaying mask-image with gradient to create a gradually transparent effect on both sides#
mask-image: linear-gradient(
to right,
transparent,
#000 10% 90%,
transparent
);
Infinite loop animation, adding delay can create an infinite scrolling effect
.slider .list .item{
width: var(--width);
height: var(--height);
position: absolute;
left: 100%;
animation: autoRun 10s linear infinite;
transition: filter 0.5s;
animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1) )!important;
}
Adding hover effect to parent and child elements simultaneously to create a selection effect
.slider:hover .item{
animation-play-state: paused!important;
filter: grayscale(1);
}
.slider .item:hover{
filter: grayscale(0);
}