how do I apply this layout?

Search/Text overlaps image/video...

how can I do this?

DEMO:
http://wp-dreams.com/demo/ajax-search-lite/

Thanks

 

One way would be adding a large image as a background. Add it to your existing body css (change /images/your_image.jpg to your own):

body {
top: 0;
left: 0;
right: 0;
background: url(/images/your_image.jpg) no-repeat;
background-attachment: fixed;
z-index: -100;
background-size: 100%;
}

Code (markup):

By the way, the bg image will be responsive. The top: 0; left: 0; right: 0; may not be needed, it will depend on what else is in your body css. I have no idea how they make it move on hover like it's in your example above. But if you do not want it as a background then google text over image css there are many examples out there.

Since it's a background image everything else will show over it:

https://jsfiddle.net/4dvm9oz6/

_

 

I need it to show over videos, but I see where you are coming from...
in either case, will have to hire a coder to apply the needed css....

 

Your first post says image/video. If you want to show it over an HTML5 video it's a bit more complicated. I just googled and found this example:

https://codepen.io/dudleystorey/pen/knqyK

_

 

Actually here's a much simpler working example: http://jsfiddle.net/NAeJD/488/

 

yep, much better, dont think coder will have a problem if he knows his stuff..

Thanks