Kevin Powell - Community•2y ago

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

Szabi•2y ago

but if i put a linear gradient before the background image, then the ease-in-out animation doesn't work anymore

MarkBoots•2y ago

instead of the filter you can do this

.banner-bg{
  /*filter: brightness(50%)*/
  position: relative;
  isolation: isolate
}
.banner-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsl(0 0% 0% / .5);
  z-index: -1;
}

.banner-bg{
  /*filter: brightness(50%)*/
  position: relative;
  isolation: isolate
}
.banner-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background-color: hsl(0 0% 0% / .5);
  z-index: -1;
}

changes in the screenshot are marked with the green line

MarkBoots•2y ago

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

Mark Boots

CodePen

vYaGZRr

...

Szabi•2y ago

@keyframes animBg { to { margin-left: calc(var(--total-slides) * -100%); } } i dont understand that in the end

MarkBoots•2y ago

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.

Szabi•2y ago

i got it now thanks for the explanation that was something new for me im not familiar with calc's

MarkBoots•2y ago

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

Szabi•2y ago

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?

MarkBoots•2y ago

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 does

Szabi•2y ago

yeah 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

MarkBoots•2y ago

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

Szabi•2y ago

don't bother with that, i was just curious steps are working fine, u still helped a lot for me

Gaming

Programming

I want to darken my banner background images