I'm looking for a way to darken all of the area within a container except for a transparent child div. This div is draggable, so the dimmed area would have to move with it. Does anyone know of a way to achieve this using jQuery/CSS? Here is a picture of the effect I am trying to achieve:
EDIT: SOLVED
See #Robby Cornelissen's answer
Could do something like this fiddle. It relies on an absolutely positioned viewport element with a fixed background. If you click the viewport element, you'll see that it moves while the background stays fixed.
HTML
<div class="back">
<div class="overlay">
<div class="front">
</div>
</div>
</div>
CSS
.back, .front {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Swallow_flying_drinking.jpg/1024px-Swallow_flying_drinking.jpg");
background-attachment: fixed;
background-position: 0,0;
}
.back {
width: 1024px;
height: 623px;
}
.front {
position: absolute;
left: 200px;
top: 50px;
width: 300px;
height: 150px;
z-index: 100;
}
.overlay {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
Related
I'm creating an input, where users can upload file images to change avatars as Facebook does. But I know Facebook creates a cycle area and users can fix the image to fit with that circle (image below). I have no idea how to do it. Tell me if you know
Possibly the easiest way to achieve such an effect is to overlay a rounded rectangle with a transparent black outline over the image. However, you will also need to wrap the element in another container with overflow set to hidden to limit the backdrop to the image.
Here is a quick demo:
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
}
.circle {
position: absolute;
border-radius: 100%;
outline: rgba(0, 0, 0, 0.5) 100vmax solid;
height: 200px;
width: 200px;
top: 50px;
left: 150px;
}
<div class="wrapper">
<div class="circle"></div>
<img class="image" src="https://picsum.photos/500/300">
</div>
I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside
If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>
I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
Image:
I have a container div (yellow) which I’d like to keep at 50% width of the window. A child of that container is an image div (purple) that stretches to 100% of the parent container’s width. and there’s a sticky label (pink) on top of the image div (position: absolute so it can be offset relatively to the image). I'd like to keep that entire half of the screen fixed positioning so it stays sticky as I scroll.
There’s also a title under the image, and that title needs to be visible no matter if someone shrinks the window vertically. So in that scenario the image div should shrink vertically, if needed, in order for that title to be shown.
Basically I'm trying to have the image div always be 100% width of the parent container div. With the image div having a max % height so it can shrink vertically. Or have it keep a fixed aspect ratio (3:4 or whatever) when it shrinks vertically.
I'm trying to avoid using fixed pixels, or ems, in the entirety of my CSS. since the website needs to be stretchy/‘fluid’ vertically, because that title under the image has to show.
HTML looks roughly like:
<wrapper>
<left-column>
<normal text and scrollable stuff>
<right-column-yellow>
<image sticky label-pink>
<image div-purple>
<image title>
Sorry if this is damn confusing my brain is fried! Can anyone pls help me?
You can divide your left and right panel by using position fixed.
If I'm not wrong with your description, this is the answer.
<div class="wrapper">
<div class="left">
<p><!--Some very long text--></p>
</div>
<div class="right">
<div class="image">
<div class="label">Label</div>
<div class="title">Title</div>
</div>
</div>
Some CSS
.left,.right{
position: fixed;
width: 50%;
height: 100%;
display: inline-block;
}
.left{
left:0;
top: 0;
overflow: auto;
}
.right{
right: 0;
top:0;
background-color: yellow;
}
.right .image{
position: relative;
width: 100%;
height: 50%;
top: 50%;
left: 0;
background-color: #fff;
transform: translateY(-50%);
}
.right .image .label{
position: absolute;
left: 0;
right: 0;
top: -10px;
text-align: center;
width: 200px;
background-color: pink;
margin: auto;
}
.right .image .title{
position: absolute;
left: 0;
right: 0;
bottom: -40px;
text-align: center;
width: 200px;
background-color: #000;
margin: auto;
color: #fff;
font-size: 30px;
}
You can refer to my codeine as well.
https://codepen.io/masonwongcs/pen/WMJGZb
I am trying to overlay 2 DIV's in my main parent DIV:
I want to overlay the the second div over on top of the first one. I have a problem overlaying it as I cannot keep it in the middle of the screen.
I have tried this to overlay:
The overlay works fine here, but my container is no longer center when I do this. How can I overlay and keep it center ?
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Here is what you need to do (see width of both divs and text-align properties):
You can give them background color to see z-index works perfectly :)
#first {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 1;
}
#second {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 2;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
When you position absolute, the positioned element is taken out of the document flow and positioned relative to the next highest parent element that is not the default position, i.e. not position: static;
The following will cause the absolute positioned children to stay within the containing div:
#container {
position: relative;
}
Your container's text is no longer centered because you have removed its children from the document flow. In essence, it has no content and collapses, and therefore, has no width to which to align the text.
One thing you could do is set the container to position: relative and full-width (i.e. width: 100vw), then set its children to width: 100%.
Then the inner divs will take on the width of their parent.
See this working JSFiddle.
#container {
position: relative;
width: 100%;
height: 100px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
#first{
position: absolute;
}
#second{
position: absolute;
}
<div id="container" class="container">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Your main issue is that the divs will not have any relative width to the parent div.
Therefore the text is still technically "centered" in each corresponding div because they're inheriting text-align: center from the container div.
However, the divs' widths will automatically be as wide as they needs to be (i.e. to fit the text, in this case).
You can remedy this one of two ways:
Force the divs to be centered
Give both divs the following (extra) CSS:
left: 50%;
width: 100%;
margin-left: -50%;
This will literally center them in their parent div.
or
Force the divs to be the same size as their parent
Give both the divs the following (extra) CSS:
top: 0;
bottom: 0;
left: 0;
right: 0;
This sets the divs to span their entire parent's height and width.
In both situations, you might need to make the .container class use position: relative, in order for the child divs to have something to be absolute to.
If you're using Bootstrap, there is no need to worry about this, as .container class already has this applied.
Hope one of these solutions helps you :)
Try this style:
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
My Goal:
So I am making a webpage with a map of the USA as the "background image" and on top of that map I have about 10 markers pointing to specific location. The markers are NOT part of the picture thats just me adding them with absolute positioning and top and left with a percentage.
The Problem:
As I scale down the page or scroll up and down the markers that I have set with absolute positioning begin to move out of the spot they are suppose to be on because the background-image is getting smaller do to it displaying 100%.
The Question:
How can I achieve what I want with the markers on the map where they are suppose to be not moving as the window is being scaled down?
Now I know of only 1 solution and this solution can take a VERY LONG TIME. What I was thinking is instead of positioning the markers that I want on the map with percentage I can do it with pixels and then use a TON of media queries and keep on adjusting it. Not only is this solution going to take extremely long but it also does not seems like the correct way to go about this.
HTML:
<div class="container main-content"><!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div> <!--the marker that is positioned absolute-->
</div>
</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body{ overflow: hidden; }
.main-content{
background: url('assets/img/map1.jpg') no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap{
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.marker{
height: 40px;
width: 40px;
border-radius: 100%;
background-color: red;
position: absolute;
top: 50%;
margin-top: -20px;
}
The problem is that your background image's size is set to 100%: background-size: 100%. This means that when the browser tries to scale the content, the background does not scale with it (it stays 100%).
Your best bet is to remove the background-size property completely. This allows the markers to stay in place when the page scales, however, you won't get the full-screen background effect that you currently have (unless you have a larger image).
The background will still move, however, once the browser window width is less than the image's width. This is because you have the background-position set to top center. The center is what causes it to move once the browser window width is less than the image width. Change center to left and it will fix that issue. You'll also need to set the marker's container to be based to the left as well for this to work on wider screens though. Basically, removing all center properties would help, but the screen wouldn't be centered on a wide screen.
Try substituting css :before pseudo element for .marker ; set percentage unit values utilizing calc()
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: #000;
}
body {
overflow: hidden;
}
.main-content {
background: url(http://lorempixel.com/400/300) no-repeat top center;
background-size: contain;
height: 100% !important;
width: 100% !important;
}
.eq-content-wrap {
position: absolute;
width: 500px !important;
top: 22%;
left: 40%;
}
.main-content:before {
content: " ";
height: calc(12.5%);
width: calc(5%);
border-radius: 100%;
background-color: red;
position: absolute;
top: calc(50%);
left: calc(50%);
margin-top: calc(1%);
}
<div class="container main-content">
<!--the map background image is set here-->
<div class="row relative">
<div class="eq-content-wrap">
<div class="eq-content">
<div class="marker"></div>
<!--the marker that is positioned absolute-->
</div>
</div>
</div>
jsfiddle http://jsfiddle.net/o79rpawc/