-
Posts
-
Hi,
I have a background video that a client wants to use with a transparent header, but the top of the video is too light for the white menu text to show up, so I want to add a dark overlay to the top portion, with a reducedd opacity, then fading out, so like 75% dark overlay at top, reducing down to 0% overlay, just so the very top is darker to see the menu.
Is that possible using CSS?
how did you place the video? Inside a full-width slider?
Are there other slides inside the slideshow that should also have that overlay?
Give a custom-class to that slideshow f.e. dark-overlay and then use the after pseudo container to get the overlay:.avia-slideshow.dark-overlay .av-video-slide .mejs-mediaelement:after { content: ""; position: absolute !important; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.75) 25%,rgba(0,0,0,0.1) 70%); background-size: cover; background-repeat: no-repeat; }on the other hand – you could style the caption – to have a better contrast – f.e.:
.avia-slideshow.dark-overlay .av-video-slide .avia-caption-title { text-shadow: 1px 1px 0 #c7c8ca, 2px 2px 0 #b1b3b6, 3px 3px 0 #9d9fa2, 4px 4px 0 #8a8c8e, 5px 5px 0 #77787b, 6px 6px 0 #636466, 7px 7px 7px #000; }This is pretty awesome, thank you!
I actually used a color section… can I use this same CSS but with a color section class?
yes – but the custom-class is then on the section container ( that is in the DOM Tree higher than the avia-slideshow class)
f.e. dark-overlay-on-section.dark-overlay-on-section .avia-slideshow .av-video-slide .mejs-mediaelement:after { content: ""; position: absolute !important; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.75) 25%,rgba(0,0,0,0.1) 70%); background-size: cover; background-repeat: no-repeat; }Not sure I’m understanding this, still looks like slideshow settings and I couldn’t make it work.. So I give my color section the css class “dark-overlay-on-section” right? Then add your CSS? (which is black overlay, reduced to 75% opacity for the first 25% of the color section?) Am I understanding this correctly?
Here’s the site: http://eleinar21.sg-host.com/bypass – it’s the home page video banner
(Have a coming soon page up).
I’ll give you login credentials in the event you want to take a look in the backend.
this is a selfhosted video ?
( it is always best to see the corresponding site ).dark-overlay-on-section .avia-slide-wrap .mejs-container:after { content: ""; position: absolute !important; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.8) 10%,rgba(0,0,0,0.1) 30%); background-size: cover; background-repeat: no-repeat; }The site is here, and yes, it is a short self hosted video – using a watermarked version for now.
Site is here if you want to see it: http://eleinar21.sg-host.com/bypass
I’ll try this new code now
one final question? I’m so sorry. The very top looks solid. If I wanted to reduce the opacity there just a tad, which number would I change?
open for example: https://www.colorzilla.com/gradient-editor/
copy the given gradient code from my code:linear-gradient(to bottom, rgba(0,0,0,0.8) 10%,rgba(0,0,0,0.1) 30%);
under the preset gradient there is a “button” import css –
enter the code and click “import”
now you can play with the settings.the “to bottom” means the linear gradient is from top to bottom – so the left value is the top color.
the rgba value is the color with an opacity e.g.:rgba(0,0,0,0.8). is a black with 80% opacity
the value after the rgba is the position : here 10% ( top to bottom) from the top.Hi,
Thank you Guenni007 for helping, Eleina_Shinn were you able to sort this out with Guenni007’s help?Best regards,
MikeYes Mike – I can find the code there again – but the effect is built in very discreetly, so that you will hardly notice the darkening in the upper part.
- You must be logged in to reply to this topic.