I have a progress bar that needs to be on top of an overlay, here is the broken jsfiddle
Markup:
<div class="overlay mouse-events-off">
<div class="progress progress-striped active">
<div class="bar" style="width: 40%;"></div>
</div>
</div>
CSS:
.overlay { background-color: black; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.2; /* also -moz-opacity, etc. */ z-index: 100; }
.progress { position: absolute; top: 50%; left: 35%; width:300px; height:20px; z-index:101; opacity:1.0; }
The progress bar is also at 20% opacity.
I have a fix by just placing the <div> that carries the progress bar outside of the overlay it works. But seems like extra mark-up
Working Markup:
<div id="progress" style="display:none;">
<div class="progress progress-striped active glow">
<div class="bar" style="width: 40%;"></div>
</div>
<div class="overlay mouse-events-off"></div>
</div>
Is there a more elegant way to solve this with just CSS?
When you use opacity, everything inside that element will be affected too, no workarounds.
You have two ways of doing this:
Progress Outside
Put progress outside overlay and play with it to be centered on top of overlay.
.progress {
position: absolute;
top: 50%;
left: 50%;
width:300px;
height:20px;
margin:-10px 0 0 -150px; //half width left, half height top
z-index:101;
opacity:1.0;
}
Keeping as is
Instead of using opacity on the element itself, use on the background instead!
.overlay {
background-color: black; /*older browsers*/
background-color: rgba(0,0,0,.2); /*new ones will overwrite the 'black' declaration with rgba*/
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*opacity:0.2; no opacity!*/
z-index: 100;
}
Here's the jsFiddle for the second one:
http://jsfiddle.net/Qpv4E/2/
Here's the same question: I do not want to inherit the child opacity from the parent in CSS
Hopefully the answers with RaphaelDDL's will help.
Related
I'm currently facing an issue regarding a Text over an image.
Here is my css code :
.box{
position: relative;
display: inline-block; /* Make the width of box same as image */
}
.box .text{
position: absolute;
z-index: 999;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
top: 40%; /* Adjust this value to move the positioned div up and down */
background: rgba(0, 0, 0, 0.8);
font-family: Arial,sans-serif;
color: #fff;
width: 60%; /* Set the width of the positioned div */
}
Here is my html :
<div class="box">
<img src="name.jpg" alt="">
<div class="text">
SpinnerBait Brochet
</div>
</div>
Here is how it looks like in codepen.io :
BUT, when i'm adding my html in my wordpress I have a completely different rendering.
I do have my picture where I added it in the page BUT my text is in the middle of my page (and not in the middle of my image...)
Do you have any idea what could be the issue ?
Thanks
By looking at your question my guess is that you are trying to center the text on top of the image.
Try the following:
HTML:
<div class="box">
<img src="https://via.placeholder.com/350" alt="Placeholder">
<div class="text">
SpinnerBait Brochet
</div>
</div>
CSS:
.box {
display: inline-block;
position: relative;
}
.box .text {
display: inline;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #fff;
}
CodePen here.
Essentially what the CSS is doing is:
Positioning the text absolutely in the center of it's relative container:
display: inline;
position: absolute;
top: 50%;
left: 50%;
Changing the starting position of the X and Y axes points to the true center of the element.
transform: translate(-50%, -50%);
I made an image that when hovered upon will change the opacity of the div on top of it. The div should be the same size as the image. I have managed to place the div on top of the image. However, when I set the width and height to 100%, the div covered the image INCLUDING the image's margin. I want to know how to fix it so that the div can only cover the image with the margin not included. Please note that I need the image to be responsive, so I do not want to set the height in pixels as much as possible.
Here's the fiddle:
https://jsfiddle.net/gsuxlzt/77vn1uyg/
Here's the code:
.margin {
margin-bottom: 10px;
}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
<div class="photo-thumbnail">
<img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg" />
<a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
</div>
You can try this code:
Html Code:
<div class="photo-thumbnail"><img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg"/><a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
CSS Code:-
.margin {
margin-bottom: 10px;
}
.img-thumbnail{padding:0px;}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
https://jsfiddle.net/Dhavalr/77vn1uyg/8/
first of all, don't use padding and margin for <img> instead use it for .photo-thumbnail
and use this code.
.photo-thumbnail {
position: relative;
display: inline-block;
vertical-align: top;
}
using inline-block for the parent can make image flexible as well as only occupy the necessary area as image.
try this, it will work.
In your example you are missing the closing of your "photo-thumbnail"
You are not obligated to use "Width: 100%", "Height: 100%", when you have an absolutely positioned element, instead you can make it take all of the space with
top: 0;
right: 0;
bottom: 0;
left: 0;
And in your case you can set the
bottom: 10px;
since that is how much your div gets out of the picture
here is an example in a fiddle: https://jsfiddle.net/77vn1uyg/3/
I'm not sure what the proper terminology is for this effect. I want to say its a blend mode or clipping path thing. What I want to do is when the text get scrolled over (or under) another element to have the text change its color. See the example image below..
So the text is light gray by default then when it scrolls underneath (or over, not sure which way it should be stacked) that gray bar the text goes black.
I know I've seen this done before but just can't remember what the property used was called.
I think what you are looking for is mix-blend-mode but Browser Support still pretty bad Fiddle.
body {
height: 1000px;
}
.text {
text-transform: uppercase;
position: absolute;
top: 80%;
font-size: 50px;
font-weight: bold;
text-align: center;
width: 100%;
color: gray;
z-index: 2;
left: 0;
mix-blend-mode: difference;
}
.box {
width: 60%;
position: fixed;
transform: translate(-50%, 0);
z-index: 1;
left: 50%;
top: 0;
height: 100px;
background: #AAAAAA;
}
<div class="box"></div>
<div class="text">Lorem ipsum</div>
Do you mean something like this?:
<div style="position:absolute; top:0; left:0; bottom:0; right:0; overflow:auto;">
<div style="height:1000px; background-color:#ccc">
<br/><br/>EXAMPLE<br/>EXAMPLE<br/>EXAMPLE
</div>
</div>
<div style="position:absolute; top:0; left:0; height:50px; right:16px; background-color:white; opacity:0.5">
</div>
Example: https://jsbin.com/bexafinuti/edit?html,output
That feature can be made with css opacity. Content become grayed when scrolled under absolute positioned div with white background and half opacity
I'm curious whether it's possible with CSS to have a <div> overlaying the <div> above and below, like so:
I've tried to use margin-top: -40px;, but that doesn't seem to work. I've tried position:relative; without any luck, either. Any ideas?
Thanks!
Sure!
Demo Fiddle
The trick is managing the positioning of your divs, then setting the offset (top) correctly for the div you want overlapping.
<div></div>
<div>
<div></div>
</div>
CSS
div {
width:100%;
height:100px;
position:relative; /* ensure the parent divs have a position set */
}
div:first-child {
background:red;
}
div:last-child {
background:blue;
}
div:last-child div {
opacity:.5;
height:50px;
background:white;
position:absolute; /* position relative to the parent */
top:-25px; /* position the top to -25px (half its height) above the top of the parent */
}
There are many ways to do this:
With all div's absolutely positioned
You can use position: absolute to achieve this. This is better if you are trying to build a web app as it sticks to the edges of the screen.
Fiddle here
HTML
<div id="top-section"></div>
<div id="banner-section"></div>
<div id="btm-section"></div>
CSS
div {
position: absolute;
left: 0;
width: 100%;
}
#top-section {
top: 0;
bottom: 50%;
background: red;
}
#btm-section {
top: 50%;
bottom: 0;
background: blue;
}
#banner-section {
height: 100px;
margin-top: -50px;
top: 50%;
background: rgba(255,255,255,0.5);
z-index: 2;
}
With the #banner-section relatively positioned
You mentioned that you tried relative position. This is how you can achieve what you were trying to do. In this case, you want the #banner-section to be nested inside the #btm-section:
Fiddle here
HTML
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
position: relative;
top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
With a negative margin on #banner-section
You also mentioned that you tried using a negative value for the margin-top. Here is a working example of that:
Fiddle here
HTML
(Also nested)
<div id="top-section"></div>
<div id="btm-section">
<div id="banner-section"></div>
</div>
CSS
#banner-section {
margin-top: -50px;
height: 100px;
background: rgba(255,255,255,0.5);
}
You can also have it poking out of the top section
If the #top-section is static and the bottom section can extend past the bottom of the page, this might be the best option for you.
Fiddle here
HTML
<div id="top-section">
<div id="banner-section"></div>
</div>
<div id="btm-section"></div>
CSS
#banner-section {
position: absolute;
bottom: -50px;
z-index: 2;
height: 100px;
background: rgba(255,255,255,0.5);
}
Without further details you can do it as follows:
JSFiddle Example
HTML
<div class="top-section"></div>
<div class="banner-section"></div>
<div class="btm-section"></div>
CSS
.top-section{
height:60px;
background-color:red;
}
.btm-section{
height:60px;
background-color:blue;
}
.banner-section{
position:absolute;
z-index:1;
margin-top:-20px;
height:40px;
width:100%;
background-color:rgba(255,255,255,0.5);
}
End Result
The trick here is to have the middle div banner-section positioned absolutly, and with a margin-top value negative corresponding to half its height, giving us this end result:
Explanation
Since the element with the CSS class .banner-section gets positioned absolutely, it will rise above in the document stack order. So the elements .top-section and .btm-section stay one after the other.
An element with position:absolute will then need some extra css to keep up with the desirable appearence, like a width declaration and a height declaration to set its size.
Check if this one helps you
http://codepen.io/anon/pen/EJBCi.
<div class="outer">
<div class="topSec"></div>
<div class="midSec">Midcontent</div>
<div class="btmSec"></div>
</div>
CSS
.outer {
position: relative;
height: 400px;
text-align: center;
}
.topSec {
height: 50%;
background: red ;
}
.btmSec {
height: 50%;
background: yellow ;
}
.midSec {
position: absolute;
background: rgba(255,255,255,0.7);
z-index: 1;
top: 50%;
height: 60px;
margin-top: -30px;
left: 0;
right: 0;
line-height: 60px
}
Most examples on CSS bars are showing how to make a wrapper, and have an inner bar going from left to right.
I am looking to combine 2 bars, one from left to right, but on the same hight a bar from right to left.
So far, I have:
<div id="skills">
<div class="grid left">
<div class="bar pct-75"><div class="inner"></div> </div>
</div>
<div class="labels">
<p>Label</p>
</div>
<div class="grid right">
<div class="bar pct-75"><div class="inner"></div> </div>
</div>
</div>
And CSS:
.grid {
border-left: 1px dotted #e8ab6a;
border-bottom: 1px dotted #e8ab6a;
float: left;
padding: 10px 0;
position: relative;
}
.bar {
height: 15px;
margin-bottom: 20px;
position: relative;
width: 100%;
z-index: 1;
.inner {
background-color: #feac40;
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
}
Fiddle: http://jsfiddle.net/f8WKt/
What is the trick to make the bar from right to left?
try adding
.left .bar.pct-75 .inner {
left: 25%;
right: 0;
}
http://jsfiddle.net/f8WKt/3/
Assuming you want to join the 2 bars at the middle
I have provided an example of what I think you have asked
DEMO http://jsfiddle.net/f8WKt/5/
I have used position absolute within a ralative positioned div. The right one has right: 0; and the left one has left: 0;
.inner {
background-color: #feac40;
position: absolute;
width: 80%;
bottom: 0;
top: 0;
}
.right .inner {
right: 0;
}
.left .inner {
left: 0;
}
I have put a border around them to make it clear that one is left to right and the other is right to left.
Add right:0 to your right bar.
fiddle: http://jsfiddle.net/5SUVb/