How do you add a color overlay to a video like this, as seen here:
Here is my code so far:
HTML
<div>
<div id="outer">
<div id="home-top-video">
<video autoplay loop muted width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="home-text">
<div><img src="http://marquesslondon.herokuapp.com/images/logo.ee1689ee.png"></div>
<h3>LIFESTYLE</h3>
</div>
</div>
</div>
</div>
CSS
#outer {
width: 100%;
display: block;
text-align: center;
position: relative;
overflow: hidden;
min-height: 100vh;
}
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#home-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Fiddle here: https://jsfiddle.net/kggv3213/1/
you can try pseudo element with gradient background:
body {
margin:0;
}
#outer {
text-align: center;
position: relative;
overflow: hidden;
min-height: 100vh;
}
#home-top-video:before {
content:"";
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
z-index:1;
background:linear-gradient(to right,rgba(65, 0, 255, 0.4),rgba(255, 0, 232, 0.3));
}
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#home-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index:1;
}
<div id="outer">
<div id="home-top-video">
<video autoplay loop muted width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="home-text">
<div><img src="http://marquesslondon.herokuapp.com/images/logo.ee1689ee.png"></div>
<h3>LIFESTYLE</h3>
</div>
</div>
</div>
Keep it simple, just add
#home-top-video:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background: rgba(255,0,255,0.2); //Change as per your requirement
}
Related
How to make this green text ribbon stick to the left side of the image, so it will be there even if image size is shrinking responsively?
.wrapper {
max-width: 600px;
margin: 100px auto;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
span {
position: absolute;
left: 0;
top: 0;
padding: 10px;
width: 100%;
transform: rotate(-90deg);
background-color: #00ff00;
transform-origin: center;
}
<div class="wrapper">
<div class="img-wrapper">
<img src="http://lorempixel.com/640/480/sports/" alt="" />
<span class="img-label">Some Text</span>
</div>
</div>
try use transform-origin:0% 0% and remove the top property from span. also change top:0 to bottom:0 in img
.wrapper {
max-width: 600px;
margin: 100px auto;
}
.img-wrapper {
position: relative;
padding-top: 56.25%;
}
img {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: auto;
}
span {
position: absolute;
left: 0px;
padding: 10px;
width: 100%;
transform: rotate(-90deg);
background-color: #00ff00;
transform-origin: 0% 0%;
}
<div class="wrapper">
<div class="img-wrapper">
<img src="http://lorempixel.com/640/480/sports/" alt="" />
<span class="img-label">Some Text</span>
</div>
</div>
I'm trying to center the text in the middle of JQM page, vertically and horizontally. Using 1.4.5, default theme.
In my .css I have:
.splashDiv {
position: absolute;
top: 50%;
height: 50%;
width: 100%;
text-align: center;
padding:0;
}
HTML
<div class="splashDiv" data-role="page">
Please wait...
</div>
The result is:
The text is vertically centered only if I remove top: 0 directive in developer tools(although not perfectly centered).
My question is what is the proper way according to JQM architecture to have what I want? I am not looking for quick/dirty workaround, unless there is no other way.
UPDATE
Put your splash div within a jQM page instead of making it the page:
<div data-role="page" id="page1">
<div id="cont" role="main" class="ui-content">
<div class="splashDiv" >
Please wait...
</div>
</div>
</div>
.splashDiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO
.splashDiv {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
padding:0;
}
Use this it will align your text vertically center.
Please Try it.
Your HTML
<div data-role="page" id="page1">
<div id="cont" role="main" class="ui-content">
<div class="splashDiv" >
<span>Please wait...</span>
</div>
</div>
</div>
Your CSS
.splashDiv {
position: absolute;
top: 50%;
left: 50%;
height: 50%;
width: 100%;
text-align: center;
padding:0;
overflow: hidden;
transform: translate(-50%, -50%)
}
.splashDiv span {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
DEMO
You need to use the following css:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
I have a play image which needs centering over another image. I'm using percentages, to try to have it working on all devices, but the percentages are not acting like they should. I have taken screenshots of the mobile site in portrait and landscape, you can find them here http://imgur.com/a/gN53f
The desktop site has an entirely different row which is hidden on small devices, the code below is visible exclusively on the mobile site.
Here's the css:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 30%;
left: 43%;
z-index: 2;
}
working, sort of. The HTML:
<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>
I made your .image1 class a block element, centered the image and using transform property brought image2 in the center
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
margin: 0 auto;
display: block;
z-index: 1;
}
.image2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
<div class="container">
<div class="parent">
<img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
<img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
</div>
</div>
You’ve set .image1 to be relative, but this won’t have an impact on .image2 since it is not a child of .image1. Also it is unclear what sizes the images will have.
If the second image should always scale up and down with the first one, keeping it’s position, it could be done like so:
.parent {
margin: 0 auto;
max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */
position: relative;
}
.image1 {
display: block;
width: 100%;
}
.image2 {
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
.image2 would have a 25% distance of .image1’s height/width to top, left and right.
Changed size of image to demonstrate properly
Gave width to parent div to absolute position
.parent {
position: relative;
top: 0;
left: 0;
width: 300px;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 32%;
left: 32%;
z-index: 2;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<img class="image1" src="https://placehold.it/300x300"/ alt="1">
<img class="image2" src="https://placehold.it/100x100"/ alt="2">
</div>
</body>
</html>
I your first image dictate the size of the parent container, then you should position your images like this (for my code, I've use divs with fixed size. You could give your images display: block)
.parent {
position: relative;
border: 2px solid gray;
}
.child-1 {
height:300px;
width: 300px;
background: lightgreen;
margin: 0 auto;
}
.child-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
height: 50px;
width: 50px;
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
About responsiveness, use 'media query'
set width for image 2, for example, 50%
now set left: 25%
I have a banner that ends with a triangle(arrow) that has to stay centered vertically overlapping the slideshow below it. The amount of text/content that it will accept can grow dynamically. Is there a way to style this so that as the text increases the arrow will stay centered as you see below. Below is the styling that I have to achieve the screenshot below.
.carousel {
position: relative;
margin-top:3.5em;
padding-bottom:5%;
.header {
position: absolute;
top:-2em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top:-3.5em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after {
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
}
React Component HTML:
{headerClass} = either .header or .headerWithTag depending if there is a subtitle(h3 tag).
<div className="carousel">
<div className={headerClass}>
<h1>{headerText}</h1>
<h3>{this.props.subTitle}</h3>
</div>
<div className="slideShow">
<div>
<div ref="wrapper" className="master-slider ms-skin-default" data-qa={thisName + '_masterslider'}>
{slides}
</div>
</div>
</div>
</div>
So the solution is to use top:0; transform: translate(0, -50%) to shift the header up half its height from the top of the slide:
.header {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after{
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
Quick demo: http://jsfiddle.net/7ky4wvz6/1/
I'm using the html5 video to display a background video for a site I'm building. I want it to fill the whole screen and be responsive, but there seems to be a gap in the bottom.
.video {
position:absolute;
height:100% !important;
width:100%;
top:0;
right: 0;
left:0;
bottom:0;
}
video{
position:absolute;
width:100% !important;
max-height: 100% !important;
background-size: cover;
}
<div class="video" >
<video autoplay loop poster="../img/grazing.jpg" class="fillWidth">
<source src="../videos/CowType.webm"
type='video/webm;codecs="vp8, vorbis"'/>
<source src="../videos/CowType.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</div>
And here is a link to the site:http://capelos.gonzbergagency.com/prime.html
Try this CSS for the video
video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
background-size: cover;
}
be sure to delete this from the existing video CSS
video{
width: 100% !important;
max-height: 100% !important;
}
This is what you need:
html,
body,
div,
video {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.video {
position: fixed;
top: 50%;
left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}