Search…

X3 Photo Gallery Support Forums

Search…
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

Intro Image Plugin: Darken intro image

25 Apr 2020, 09:39

Hi Karl

I'm playing around with the Intro Image Plugin as can be seen here: https://demo.photo.gallery/examples/plugins/intro-image/

In order to make the title and the description in the middle stand out more clearly I would like to darken the picture a bit using CSS.
Can you help me with the custom code I need?

Thanks,
Thomas
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Intro Image Plugin: Darken intro image

26 Apr 2020, 01:25

Hi Thomas. There is not really any method in CSS to "darken" images. Also taking into consideration that the X3 intro plugin uses CSS "background-image". However, you could for example add a semi-transparent black color overlaying the background-image. Go to panel > Settings > Custom CSS, and add this:
Code
.image-background > div {
  background-color: rgba(0,0,0,.3);
}
You can adjust the alpha value .3 up or down between .1 and .9.
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

Re: Intro Image Plugin: Darken intro image

26 Apr 2020, 01:57

Hi Karl

Thanks, that's exactly what I was looking for.

Cheers,
Thomas
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

Re: Intro Image Plugin: Darken intro image

26 Apr 2020, 06:19

Hi Karl,

Unfortunately some pixel at the top are not darkened, this happens on my desktop as well as on my mobile phone and tablet.
Why is this happening and what can I do?

Thanks,
Thomas
Last edited by tbp on 27 Apr 2020, 07:02, edited 1 time in total.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Intro Image Plugin: Darken intro image

26 Apr 2020, 11:40

This is just how some DOM elements stack ... Try this:
Code
.image-background > div {
  background-color: rgba(0,0,0,.3);
  display: inline-block;
}
 
tbp
Experienced
Topic Author
Posts: 42
Joined: 12 Apr 2020, 09:19

Re: Intro Image Plugin: Darken intro image

26 Apr 2020, 11:54

That's it. Thank you!