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>
Related
I have a slider, I want the edges of the content div to have a blur effect, blurring the background image behind it. The background image is from the parent div. As you can see the content inside it is not blurred and you can see through the background, but the edges are blurred. Any ideas on how to achieve this effect?
It doesn't matter if it's CSS only or mixed with JavaScript, I'm using React anyways.
Here's an approach using clip-path (documentation) and backdrop-filter (documentation) Both are relatively new rules, so check your browser compatibility.
We use the clip path to select a 10% "frame" around the inside of your box, and then apply a 10px blur with backdrop-filter
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>
Here's a version using CSS variables so you can quickly/easily adjust the blurred border thickness. Just change the --b CSS variable:
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
/* The border thickness (Can be a percentage or pixel value) */
--b: 6px;
/* Work out the inverse value for the right/bottom sides of the clip path */
--b2: calc(100% - var(--b));
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, var(--b) 100%, var(--b) var(--b), var(--b2) var(--b), var(--b2) var(--b2), var(--b) var(--b2), var(--b) 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: var(--b);
left: var(--b);
right: var(--b);
bottom: var(--b);
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>
You don't need to use clip-path if you set the same background image on the content box. Caveat: background-attachment needs to be fixed. And if you use flex for all the boxes, just setting position: absolute on the content would be enough to center it on top.
html, body, .bg {
height: 100%;
width: 100%;
}
.bg, .blur-box, .content-box {
display: flex;
align-items: center;
justify-content: center;
}
.bg, .content-box {
background: url(https://picsum.photos/seed/1/1920/1080/) no-repeat fixed 0 0 / cover;
}
.blur-box {
position: relative;
width: 70vh;
height: 70vh;
backdrop-filter: blur(5px);
}
.content-box {
position: absolute;
width: 50vh;
height: 50vh;
color: white;
border: 1px solid white;
}
<div class="bg">
<div class="blur-box">
</div>
<div class="content-box">
TEXT
</div>
</div>
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.
Without scale code works fine, but I need to center vertically an already scaled element. I am looking for solution using CSS or JS approaches.
Also I can not use transform-origin CSS property because it's unsupported in some browsers that I need to support...
https://jsfiddle.net/o62ja9r6/17/
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
top: 50%;
transform: scale(0.4) translateY(-50%);
/* transform: translateY(-50%); // <--- it works */
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>
Order matters, swap translateY with scale.
.container {
position: fixed;
border: 2px dashed blue;
width: 400px;
height: 300px;
}
.slide {
position: absolute;
width: 76px;
height: 169px;
background-color: red;
}
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%) scale(0.4);
}
<div class="container">
<div class="slide vertical-center">
</div>
</div>
Quick Explination
If you have an element that is 100px tall and you translate it along the y-axis by -50% it will move up 50% of it's height, which would be 50px. If you scale that 100px tall element first, down to 40% of it's height, then it will be 40px tall when you try to translate it along the y-axis, which will only move it up 20px.
Instead of translate you can use simple CSS for this
.vertical-center {
top: 0;
left:0px;
bottom:0px;
right:0px;
margin: auto;
transform: scale(0.4);
}
for working demo click here
I've already looked at a few answered questions and none of them worked.
I am trying to make my logo rotate and translate from off the page when the page loads. I am rotating with css but using .animate to translate it. I can't find anything that makes my code work
Fiddle
<div class="logo">
</div>
<div class="info">
</div>
<script>
$(function() {
$('.logo').animate(
{left: '200px'}, 2000
);
});
</body>
body {
background-image: url('images/floor.jpg');
background-size: cover;
background-color: #000;
background-repeat: no-repeat;
}
.info {
background-color: #966f33;
width: 12%;
margin-left: 64%;
height: 100%;
position: absolute;
margin-top: -208px;
box-shadow: 0px 0px 35px 10px #000;
}
.logo {
background-image: url('images/logo.png');
width: 220px;
height: 220px;
position: relative;
background-size: 100% 100%;
margin-top: -20px;
margin-left: -220px;
animation: rotate 2s linear once;
}
#keyframes rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(720deg);}
}
Just animate marginLeft instead of left with jQuery. Your div has position relative.
$(function() {
$('.logo').animate({
marginLeft: '200px'
}, 2000);
});
I also changed the picture URL in the Fiddle so it can display something.
Here it works:
https://jsfiddle.net/9s66oyd4/2/
Hello I just started web developing and I am stuck at trying to blur the background image of a div on hover, but without affecting the text.
As you can see I have an id called c1 and I used a javascript function to display text on hover, which is working great.
Now I want to use css/javascript to blur the background image without bluring the text. Is this possible?
My CSS:
#c1 {
float: left;
width: 300px;
padding: 30px;
margin: 15px;
background-image: url(images/cd.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 20px;
height: 150px;
}
#c1:hover {
-webkit-filter: blur(5px);
}
My HTML:
<div id="productos">
<a name="jproductos"></a>
<ul>
<div id="c1">
</div>
</ul>
</div>
#c1 {
position:relative;
float: left;
width: 300px;
padding: 30px;
margin: 15px;
border-radius: 20px;
height: 150px;
overflow:hidden;
}
#c1:after{
content:'';
display:block;
position:absolute;
z-index:-1;
top:0;
left:0;
bottom:0;
right:0;
background: url(images/cd.png) no-repeat center;
background-size: cover;
}
#c1:hover:after{
-webkit-filter: blur(5px);
}
You would have to structure your html differently. If you make a relative container and place the image as a separate div from the text:
<div class="container">
<div class="image"></div>
<div class="text">Text</div>
</div>
.container{
position: relative;
}
.image, .text{
position: absolute;
top: 0;
left: 0;
}
.image{
-webkit-filter: blur(5px);
}
This way the text and image aren't parent/child/same element and you can blur only the image, but still have the text appear as if it is on the image