Carousel darken texture

I Need Help
1

Hi there,

is it possible to add texture layer (e.g. Darken) to Carousel image?

Thanx

2

Hi, still no idea how to add darken layer to the carousel image?

3

It’s not possible in the current release. You would need to use an image editing app to do it to the actual image file.

4

Not sure if this would fit what you need, but I added a filter on the image to lower the brightness.

Right click, Page Settings, add Code:
Add this in the Head Code:

<style>

.image-darken {
filter:brightness(50%);
}

Then click on the carousel you want to darken, and type in image-darken in the Classes area and press enter.

5

I tried this but I cannot load page in preview, just white screen appears. Your idea sounds interesting though.

6

I don’t think it will work in the Blocs preview, only when previewing in the actual browser. I am using it on a carousel that has some filter controls on it. I could see if I could do a sample project for it.

Try this sample project and see if it works for you

http://cincyplanet.com/blocs/cssFilterSample.bloc

7

Love you! :smiley::+1:

1 Like
8

Well, is there any way to avoid darken layer on indicators and text in carousel?

9

Try this and let me know if it works:

image-darken > item > img {
filter:brightness(50%);
}

10

No effect at all, original photo with no layer.

11

oh sorry, I see what I did wrong, I was using the wrong selector, trying this:

.image-darken img {
filter:brightness(50%);
}

1 Like
12

Definitely in love :ok_hand:

13

Can I use this method for custom darkening of any image on my site? I’m trying to use this on other windows just on background image - Inserted style parameters on page setting, applied image-darken class but it has no effect…

14

I would make a new class for other images since this one requires a img under the image-darken one.
So you could just do:

.darkenMe {
filter:brightness(50%);
}

then apply the darkenMe class to the image should work.

15

Thanks, but same problem as previous, it also make darker text - any way to avoid that? :see_no_evil:

16

Oh, you are trying to use it on the Page Background?

17

Block background, just like that:

Screen Shot 2017-08-11 at 10.24.17 AM.jpg3838Ă—1218 1.07 MB

18

I don’t think it would be very easy to do how its set up, I would just apply a blur to the actual image using Photoshop or something for that. Otherwise you could probably have to create a container div and place content on that. Ill look into it a bit more and if I do find a better way Ill let you know.

19

Yea, I’ve already tried Photoshop, but it’s not a “cool” way :sunglasses:
Thanks that you’re still trying

20

I still couldn’t find out another way than darken images in photoshop… What exactly do you mean with that container div?