Page 1 of 1
Intro Image Plugin: Darken intro image
Posted: 25 Apr 2020, 09:39
by tbp
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
Re: Intro Image Plugin: Darken intro image
Posted: 26 Apr 2020, 01:25
by mjau-mjau
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:
.image-background > div {
background-color: rgba(0,0,0,.3);
}
You can adjust the alpha value
.3 up or down between
.1 and
.9.
Re: Intro Image Plugin: Darken intro image
Posted: 26 Apr 2020, 01:57
by tbp
Hi Karl
Thanks, that's exactly what I was looking for.
Cheers,
Thomas
Re: Intro Image Plugin: Darken intro image
Posted: 26 Apr 2020, 06:19
by tbp
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
Re: Intro Image Plugin: Darken intro image
Posted: 26 Apr 2020, 11:40
by mjau-mjau
This is just how some DOM elements stack ... Try this:
.image-background > div {
background-color: rgba(0,0,0,.3);
display: inline-block;
}
Re: Intro Image Plugin: Darken intro image
Posted: 26 Apr 2020, 11:54
by tbp
That's it. Thank you!