I want to darken my banner background images
The problem is when I set the "filter: brightness(50%)" value, my banner title also got 50% brightness which I don't want to. I tried to change the title's brightness back to 100%, but it doesn't really work. I will attach 2 pictures of the code, and there is the link for the site:
https://lovely-swan-09f5fa.netlify.app/
13 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
but if i put a linear gradient before the background image, then the ease-in-out animation doesn't work anymore
instead of the filter you can do this
changes in the screenshot are marked with the green line
![](https://utfs.io/f/f4b94525-6b23-493f-80e7-ed48e7f0c648-1nq2cb.png)
I also want to show you this option. Here the images are already in the html, that way the bg image doesnt have to switch every frame https://codepen.io/MarkBoots/pen/vYaGZRr
@keyframes animBg {
to {
margin-left: calc(var(--total-slides) * -100%);
}
}
i dont understand that in the end
it is setting the left margin of the first image from 0 to -600%. so that way the images (which are all next to eachoter, but hidden with overflow) shift to the left
with the animation property on that image, the steps are set to 6, so it will move to -600% over 6 steps
I use a variable
--total-slides
to have it al dynamic. if you have more/less images, you only have to adjust that number.i got it now
thanks for the explanation
that was something new for me
im not familiar with calc's
no problem, good luck. if you want to keep the pen for reference, make sure you fork or copy it. I wil remove it later
also that step thing
on the animation
never seen that
.banner > .banner-bg > img:first-child {}
its img:first-child because we wanna start the animation from that, yeah?
yea, that is the only one that is animating. because if that one shifts to the left, the ones next to it will automaticly shift with it
if you remove the
steps(...)
you will see what it doesyeah i see xd
its really ugly without it
so its not possible with ease-in-out?
like i dont want them to disappear instantly, i want them to fade away
nah, not with that setup, didnt know you wanted that. The steps is replacing the ease function.
I don't have as much time today. maybe i will try adjusting it later
don't bother with that, i was just curious
steps are working fine, u still helped a lot for me