Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Roven Loo
Roven Loo
7,834 Points

How do I add this kind of filter on the div?

I'm trying to add this kind of filter on top of the video. If you look at this website - http://www.equus-automotive.com/en_US/ You will see that they have some sort of filter overlying the video or div.

How do I achieve this effect? I'm not really sure where to go from here. I don't know if this is a css question or a javascript question so I apologize if I asked this question in the wrong topic.

Thank you for your time

heidiatwood
heidiatwood
6,013 Points

I'm still learning my way around css and html, but I wonder if you might be able to nest a div inside of the one that is holding your video and set the background image to a halftone with a transparent background created in an image editing program. I've done overlays like this with static images before, and as long as you set a border for both the parent element and the nested div, the overlay will give full coverage.

You should be able to hide and unhide the overlay using javascript or jquery.

Roven Loo
Roven Loo
7,834 Points

I was thinking about that too. I'll give it a try. Thanks for answering!

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Man, I'm sorry. I initially thought you were talking about how to do the full screen video background, but you mean the pattern over the video. They are using a pseudo element with a background which has a similar effect of what heidiatwood suggested, but done with CSS instead of nesting a div in the HTML.

The video is here http://www.equus-automotive.com/assets/files/videos-mea-v2/accueil.sd.webm

The image is here http://www.equus-automotive.com/assets/templates/meridian/images/trame.png

The CSS is below

.videoBG:after {
    position: absolute; 
    left: 0;
    top: 0; 
    right: 0; 
    bottom: 0; 
    content: ""; 
    background: url('images/trame.png');
}
Roven Loo
Roven Loo
7,834 Points

No worries man! It worked exactly how I wanted it to! Thank you so uch for your time and effort :D I really appreciate it!