Carousel darken texture

@DGT sometimes not a cool way is the easiest way. If your already using a image then using photoshop to darken it seems a lot easier than trying to figure out how you can darken the carousel.

Casey

This way we would still be in the Stone age.
Cincyplanet already found way to darken carousel images, now Iā€™m trying to figure out how to darken the background image in the block.

Use this css and apply it to your bloc:

.bg-overlay:before {
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color: rgba(0,0,0,0.5);
}

Technically is a color overlay, but seems to work well with the black overlay.
You can change the darkness by changing the 0.5 at the end, you can also change the RGB if you want a color tint to you as well.

I should upload this code in css file in the page settings, right? Just it seems no effect is applied.

Sorry for so noob notes, just getting started with web coding.

Thanks

Yes, in the add code section, make sure it is inbettwe style tags as well. then add the bg-overlay to the bloc you want the background darker.

1 Like

Just perfect! :ok_hand:
Thank you

1 Like

Can this be done easily with blocs 4 or is still the best way to use an external graphics tool?

Its even easier in Blocs 4.

The Class Editor now supports :before and :after

So make a custom class called

.carousel-item:after

Then set the followingā€¦

Screen Shot 2021-01-07 at 4.04.06 PM !

Then set the background colour with opacity

Screen Shot 2021-01-07 at 4.04.21 PM

1 Like

@PeteSharp
Very nice thanks. Just what I neededā€¦

Bob