video and image overlay using CSS and HTML

programming web dev
1

is it possible using CSS and HTML to embed a video, then blur the video, and then overlay an (transparent) image over the video. so in other words, restating this — you would have a sort of transparent image that you could see through to the underlying blurred video. I would like to create this effect for a landing page but I have no idea what’s involved in creating something like this.

2

i’m probably thinking about this wrong. Maybe I should’ve thought about it more before I posted the question. maybe first I should start with just getting the video blurred and on the page in a container or with flexbox. Yeah, let’s start there. that should be possible right?

3

You can apply a CSS filter to your video element:

.lookingCool {
    filter: blur(2px);
}

That will give you the blurriness you are looking for. Overlaying an image on top of that will be straightforward from there :slight_smile:

Cheers,
Kirupa

4

Maybe keep in mind that could be resource intensive for some devices. @kirupa , or do you feel that would not become an issue?

5

Good point. While CSS filter effects do get hardware acceleration, it is worth double checking to be safe though :slight_smile: