I'm creating a website where I'll need to add a video. the video will be triggered using a javascript click event, the video is contained with an iframe.
The video when invoked needs to fit the height and with of the parent div. I'm using bootstrap layout to help me create a responsive layout.
I followed an example online but for some reason the video does not fit the entire width of the parent div.. I'm using the container fluid class with the col-**-12 grid layout.
I've included a jsfiddle link with an example of what I have implememnted.
https://jsfiddle.net/JuiceJay/rt9L69ya/6/
<div class="container-fluid remove-padding">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="vid_thumb embed-responsive embed-responsive-16by9" id="bio_vid">
<h1> A leader in the world of photography</h1>
<span id="play-btn"><img src = "http://www.rockinrranch.com/wp-content/themes/rockinr2013/images/play-button.png" alt = "thumb"/></span>
</div>
</div>
</div>
h1{
position: relative;
top: 240px;
text-align: center;
margin: 0 auto;
width: 70%;
color: #FFF;
letter-spacing: 0.2em !important;
font-family: "Arial Black", Gadget, sans-serif !important;
text-transform: uppercase !important;
font-weight: 100 !important;
font-style: normal;
font-size: 2em;
text-shadow: 0 4px 0 rgba(0, 0, 0, 0.1);
-moz-transition: .2s ease-in;
transition: .2s ease-in;
}
`.vid_thumb{
background-image: url('https://images3.alphacoders.com/823/thumb-1920-82317.jpg');
background-attachment: local;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
-moz-background-size: cover;
background-size: cover;
width: 100%;
height: 400px !important;
max-height: 400px !important;
margin: 0px;
padding: 0px;
filter: grayscale(60%);
-webkit-filter: grayscale(60%);
border: 1px solid green;
}
.vid_thumb img{
width: 100%;
height: auto;
margin: 0 auto;
}
span img{
width: 100%;
height: 100%;
margin: 0 auto;
}
#play-btn{
position: absolute;
overflow: hidden;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
opacity: 0.3;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display:none;
}
.vid_thumb:hover #play-btn{
display: block;
}
.vid_thumb:hover h1{
display:none;
}
#play-btn:hover{
opacity: 1;
}
.remove-padding{
padding: 0px !important;
}
document.getElementById('bio_vid').addEventListener('click', function() {
this.innerHTML = '<iframe class = "embed-responsive-item" src= "https://www.youtube.com/watch?v=t6uSHOp2Uj0" width="100%" height="400px allowfullscreen="false">';
if (document.getElementById('bio_vid').ended) {
document.getElementByTagName("iframe").style.display = 'none';
}
});
Somehow, if i use the col--6, and dive the grid in two, it fills the width of either but not col--12.. I've even tried using the bootstrap embed-responsive-16by9.
Or any help on ditching boostrap and implementing a whole new and easier method.
I would also like to know how to detect the end of a video through iframe using javascript.
Related
I was ask to create half circle-like design for my project in html css , its look like this :
Figma Design but it really ""zoomed"in.
i tried to make it and the closest i could look like this :
My Closest
with this code :
.semi-circle {
transform: translate(0, 0);
height: 150px;
width: 100%;
border-radius: 0 0 150px 150px;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
}
<div class="semi-circle"></div>
what can i tweak and how to make it like the designed one
Heres some idea for you. you can set it to transform then rotate it at the same time put a fake div at the top so you can cover all remaining blue. Let me know.
body {background-color:lightgrey;}
.semi-circle {
height: 200px;
width: 200px;
border-radius : 50%;
background-color: #0E47A1;
margin-top:0px;
transform: scale(1.5) rotateX(105deg);
overflow:hidden;
align-items:center;
margin-left:50px;
}
.box {
width: 300px;
height: 800px;
border:1px solid gray;
background-color:white;
}
.blue {
background-color:#0E47A1;
height:100px;
}
.whitebox {
width:220px;
height:40px;
line-height:1;
margin:0 auto;
box-shadow: 2px 2px 4px 2px gray;
text-align:center;
padding:10px;
border-radius:20px;
position:absolute;
top:120px;
left:40px;
background-color:white;
}
<body>
<div>Home</div>
<div class="box">
<div class="blue">
<div class="semi-circle"></div>
<div class="whitebox">Hello Visitors!
<span>this is the hidden text......</span>
</div>
</div>
</div>
</body>
I have used ::after to create the effect, you can change the height get desired curve.
.curve{
position: relative;
width: 300px;
height: 200px;
margin: auto;
overflow: hidden;
}
.curve::after{
content: "";
position: absolute;
top: 0px;
left: 50%;
border-radius:50%;
background: blue;
width:500px;
height:300px;
transform: translate(-50%, -50%);
}
<div class="curve"></div>
This looks like the example. It is responsive and will fit like that on any screen.
.semi-circle {
transform: translate(0, 0);
height: 150%;
width: 150%;
border-radius: 50%;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
position: absolute;
top: -90%;
left: -22.5%;
}
body {
overflow: hidden;
}
<div class="semi-circle"></div>
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I've managed to figure out how to lazyload images on my website where the images are called into the HTML via <img> tags. I used this package on GitHub to accomplish this. However I'm having trouble acomplishing the same thing with CSS background:'s.
-Some information on the issue:
I created an image menu bar last night that changes image size/position based on the browsers screen (Link provided). All the images in this image menu bar are called in via background: within the CSS (not through an <img> tag).
-Now for my question:
How am i able to lazyload the background: images within the css of this project I've started. On my website I would just change <img src=""> to <img data-src="" (within the HTML) after following the instructions from the Github link above, and images will load as they become visible on the screen.
-Reason for doing this:
This is purely to speed up the website and to avoid loading all images at once. Any other tips to ensure this does not take a toll on loading time, or any other possible ways around this issue would be appreciated.
-Note: I've used background: and not background-image: for this project.
If you missed the link to my project: https://jsfiddle.net/Shololom/wbgn210y/
From the Github project you provided :
Lazy background images
When to use: your images are set as CSS background images instead of real img, but you still want to lazily load them.
HTML
<div class="lazy" data-src="../img/44721746JJ_15_a.jpg"></div>
Javascript
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
That's it. Whenever the element selected by elements_selector is not an img or an iframe, LazyLoad puts the image found in the data-src attribute in the background-image of the element.
Edit: Complete example:
// Get products
var product1 = document.getElementById('product1');
var product2 = document.getElementById('product2');
var product3 = document.getElementById('product3');
var product4 = document.getElementById('product4');
var product5 = document.getElementById('product5');
// Create Lazy loader
var myLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
// Load images in a responsive way
function loadImgs() {
console.log('Loading images ...');
var src1;
var src2;
var src3;
var src4;
var src5;
if(window.matchMedia("only screen and (max-width:700px)").matches) {
/* The viewport is lesser than 700 pixels wide */
src1 = product1.getAttribute('data-src-small');
src2 = product2.getAttribute('data-src-small');
src3 = product3.getAttribute('data-src-small');
src4 = product4.getAttribute('data-src-small');
src5 = product5.getAttribute('data-src-small');
} else {
src1 = product1.getAttribute('data-src-large');
src2 = product2.getAttribute('data-src-large');
src3 = product3.getAttribute('data-src-large');
src4 = product4.getAttribute('data-src-large');
src5 = product5.getAttribute('data-src-large');
}
// Set the data-src for lazy loader
product1.setAttribute('data-src', src1);
product2.setAttribute('data-src', src2);
product3.setAttribute('data-src', src3);
product4.setAttribute('data-src', src4);
product5.setAttribute('data-src', src5);
// Tell lazy loader that the data should be re-processed
product1.removeAttribute('data-was-processed');
product2.removeAttribute('data-was-processed');
product3.removeAttribute('data-was-processed');
product4.removeAttribute('data-was-processed');
product5.removeAttribute('data-was-processed');
// Tell lazy loader to update
myLazyLoad.update();
}
// Load images first time
loadImgs();
// Reload images when window is resized
var lastWindowSize = window.innerWidth;
window.onresize = function(event) {
var currentWindowSize = window.innerWidth;
if((lastWindowSize <= 700 && currentWindowSize > 700) || (lastWindowSize > 700 && currentWindowSize <= 700)) {
loadImgs();
}
lastWindowSize = currentWindowSize;
};
.top-header-settings {
font-family: inherit;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .1em;
margin: 0 0 45px;
padding: 45px 0 0;
color: #524949;
border-top: 1px solid #ddd;
}
.top-menu-wrap {
margin: 0 auto;
position: relative;
;
background-color: #343434;
}
.top-menu-inner {
max-width: 1200px;
height: 260px;
/*/background-color:#343434;/*/
margin: 0 auto;
}
.top-menu-innerr {
max-width: 1161px;
height: 200px;
margin: 0 auto;
padding-top: 20px;
}
.top-menu-button {
width: 220px;
height: 220px;
display: inline-block;
margin: 5px;
text-align: center;
font-size: 16px;
opacity: .6;
transition: 0.3s;
}
.top-menu-button:hover {
opacity: 1
}
#font-face {
font-family: 'roboto';
src: url(https://fonts.googleapis.com/css?family=Roboto);
}
.top-menu-text {
width: 125px;
height: 30px;
/*/background-color:red;/*/
margin: 150px auto;
text-align: center;
color: white;
font-family: 'roboto';
font-size: 20px;
background: #343434;
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .60;
border-style: solid;
border-width: 1px;
line-height: 25px;
}
.coming-soon-top {
width: 75px;
height: 20px;
font-size: 10px;
text-align: center;
color: white;
position: absolute;
font-family: 'roboto';
background: #c78f8f;
}
#media only screen and (max-width:1200px) {
.top-menu-wrap {
margin: 0 auto;
position: relative;
background-color: #343434;
}
.top-menu-inner {
max-width: 1200px;
min-height: 340px;
/*/ background-color:#343434;/*/
margin: 0 auto;
}
.top-menu-innerr {
max-width: 80%;
min-height: 200px;
width: 80vw;
margin: 0 auto;
/*/background:red;/*/
}
.top-menu-button {
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
float: left;
margin: 1px auto;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 1;
transition: 0.3s;
color: white;
}
.top-menu-button:hover {
opacity: .6
}
#product2 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product1 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product3 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product4 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
#product5 {
/*background: url("http://via.placeholder.com/1080x1080");*/
/*/background:#c77f7f;/*/
width: 80vw;
height: 80vw;
max-width: 1080px;
max-height: 1080px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.top-menu-text {
/*/width:125px;/*/
/*/height:30px;/*/
width: 30vw;
height: 10vw;
/*/background-color:red;/*/
margin: 150px auto;
text-align: center;
color: white;
font-size: 5.9vw;
line-height: 9vw;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.7.1/lazyload.min.js"></script>
<div class="top-menu-warp">
<div class="top-menu-inner">
<div class="top-menu-innerr">
<a href="#">
<div id="product1" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="coming-soon-top">
Most Popular
</div>
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product2" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product3" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product4" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="top-menu-text">
Text
</div>
</div>
</a>
<a href="#">
<div id="product5" class="top-menu-button lazy"
data-src-small="http://via.placeholder.com/220x220"
data-src-large="http://via.placeholder.com/1080x1080">
<div class="coming-soon-top">
Coming soon
</div>
<div class="top-menu-text">
Text
</div>
</div>
</a>
</div>
</div>
A jsfiddle
I need to build the following screenshot, and I can't figure out how to do the angles responsively:
https://imgur.com/a/e9IJV
I tried using pseudo classes to add diagonal edges to a solid-color div.
But this design requires two images side-by-side so that won't work there. Also, the slants have to stay on the same angle through different sections with variable heights. I can't use clip-path because I need to support IE.
Here is my feeble attempt:
https://codepen.io/lsterling03/pen/zPEgaq
As you can see, I am having trouble! Is this design possible? Do you have any advice on how to approach this? Will it require javascript?
UPDATE
I have made a little progress. Here is an updated pen:
https://codepen.io/lsterling03/pen/GOOqmo
I can't get the slant right on the last section, which needs a variable height and width. I tried using javascript, but I don't have the right calculations:
$(".slant").css('width', $('.main').width() * 0.5 - 100);
$(".slant").css('border-top-width', $('.main').height());
I also haven't figured out how to do two images in a row yet.
Does anyone have suggestions to fix either of the above issues?
Here is something you can work with:
Bootply: https://www.bootply.com/4QuGRXY11d
.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute; transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg); position: absolute;
width: 100%;
top: 0;
left: -50px;transform: skewX(20deg);}
.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}
<div class="container">
<div class="flex">
<div class="cinq">1</div>
<div class="cinq">
<div class="img"></div>
</div>
</div>
<div class="flex">
<div class="cinq">3</div>
<div class="cinq"><div class="img"></div></div>
</div>
</div>
And, here is another example that you can start to investigate some more: CodePen
body {
background-color: #00bcd4;
}
div { box-sizing:border-box; }
.row {
overflow: hidden;
position: relative;
width: 100%;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: right;
}
.image2{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 64.5%;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.image3{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: left;
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
position: absolute;
right: 0;
}
.text {
background-color: #eee;
padding: 30px;
position: relative;
width: 50%;
float: left;
height: 400px;
}
.text > div {
position: relative;
z-index: 1;
}
.text2 {
height: 400px;
width: 50%;
float: left;
background: #fff;
padding: 30px
}
.corner:after {
transition: all .3s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
display: block;
content: "";
top: 0;
}
.corner-right:after {
border-left: 150px solid #eee;
border-top: 400px solid transparent;
border-right: 270px solid transparent;
}
.corner-left:after {
border-right: 150px solid #eee;
border-top: 400px solid transparent;
border-left: 270px solid transparent;
right: 50%;
}
Ok, so I want to position on top of another div which has a background image. The image-div has the following properties:
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
This looks like I want on all devices. But now I need to overlay the image-div with a clickable div that fits a certain part of the image. Getting the div to fit is easy, just set position to absolute and set top, left, width and height, but as soon as i display in another resolution/density the div is way off, no surprise there. So i tried with positioning by using % or vh and vw but nothing seems to work.
How would I go about positioning divs on top of the image regardless on what device, resolution and density I'm at?
It's a combination of background-position, background-size and an offset in percentages of the containing div.
Keep the background-position at a certain value so the spot on the image is always in screen.
Use background-size: cover; or background-size: contain; to keep the image (or it's container) responsive.
If you have two or more spots on the outer edges of the image I suggest using contain, but this will reduce the image size considerably on smaller screens while your inner div will stay reasonably large.
In other cases, use cover for resize purposes.
Here I created an example: (I used Jquery UI to make the image resizable)
$( function() {
$( "#resizable" ).resizable();
} );
.container {
background-image: url('https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');
background-size: cover;
background-position: 50% 50%;
height: 500px;
position: relative;
width: 800px;
}
.hit-me-container {
height: 16px;
left: 52%;
position: absolute;
top: 45%;
width: 16px;
}
.hit-me {
animation: pulse 1s ease infinite;
background-color: #fff;
border: 3px solid #777;
box-sizing: border-box;
border-radius: 50%;
cursor: pointer;
height: 100%;
width: 100%;
}
.hit-me-container:hover:after {
background-color: #333;
color: #fff;
content: 'Buy these glasses';
display: block;
font-family: sans-serif;
font-size: 12px;
left: 20px;
padding: 5px;
position: absolute;
width: 100px;
top: -4px;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container" id="resizable">
<div class="hit-me-container">
<div class="hit-me"></div>
</div>
</div>
Or check this fiddle
You can use a div inside of the div with the background-image, but then position it within the div wherever you want using %s, not px or absolute values.
#bg{
position: relative;
width:100vw;
height:100vh;
background-image: url('/favicon.ico');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 5
}
#overlay {
position: absolute;
height: 40%;
width: 30%;
z-index: 10;
top: 13%;
left: 34%
}
#overlay:hover {
background-color: rgba(50,50,200,0.5);
}
<div id="bg">
<div id="overlay"></div>
</div>
<style type="text/css">
#div_1
{
position:relative;
top:0;
left:0;
width:100%;
height:200px;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#div_2
{
position:absolute;
width:50%;
height:60%;
margin:0px auto;
}
</style>
<div id="div_1">
<div id="div_2">
testing...
</div>
</div>