I am currently working on an "overlay pop up", which appears when I click a certain button.
It works quite well, however I struggle with the opacity
My main overlay div appears over the whole site and I gave it an opacity, so that you can see slightly the page in the background.
Over the overlay I put a content div, which shows the actual content (in that case a password changing request).
Anyway, I don't want the content box being transparent, but no matter what I try (z-index:10, opacity:1, position:relative etc.) it doesn't work.
It is still transparent, because I set up the opacity in the overlay div.
Here is the code:
CSS:
.changePasswordOverlay
{
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color:#fafafa;
opacity: 0.9;
overflow-y: hidden;
transition: 1s;
}
.passwordOverlayContent {
margin-left:40%;
margin-top:15%;
font-family:'source_sans_proregular';
font-size:15px;
position:relative;
}
HTML:
<div class="changePasswordOverlay">
<div class='passwordOverlayContent'>
.
.
.
</div>
</div>
you need to use rgba in background instead of opacity, because opacity has inheritance properties therefore children will get opacity as well
Note that rgba, stands for Red/Green/Blue/Alpha. and that's the alpha value that will work as your "opacity" value. The greater the alpha value the more opaque will be.
.changePasswordOverlay {
height: 100%; /* changed for demo */
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .5);
overflow-y: hidden;
transition: 1s;
}
.passwordOverlayContent {
margin-left: 40%;
margin-top: 15%;
font-family: 'source_sans_proregular';
font-size: 15px;
position: relative;
color:white /* demo */
}
<div class="changePasswordOverlay">
<div class='passwordOverlayContent'>
text
</div>
</div>
Opacity applied the div and its children so .passwordOverlayContent will also have the same opacity, use background rgba instead of opacity
background-color: rgba(0, 0, 0, .9);
changed class :
.changePasswordOverlay
{
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .9);
overflow-y: hidden;
transition: 1s;
}
move the passwordOverlayContent container after changePasswordOverlay (instead of inside), and change your css to position:fixed to make it "opacity independant"
Related
I want to do the following hover slider:
The blue part should slide from left to right when hovered on the red part. It should slide from the right part of the red part and not showing (i.e. should be sliding behind the red part). Blue part should initially be hidden behind the red and should not show at all The blue part will be bigger than the red part so it had to be hidden with overflow or something else. There should be no opacity transitioning, however other transitioning is acceptable
This is what I have thus far:
HTML:
<div class="container">
<div class="static-content">
</div>
<div class="overlay">
OverLay Content - this will be some text
</div>
</div>
CSS:
.container {
position: relative;
width: 200px;
height: 100px;
.static-content {
display: block;
background-color: red;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
right: 0;
background-color: #008CBA;
height:100%;
width: max-content;
transition: .5s ease;
}
}
.container:hover .overlay {
transform: translateX(100%);
height: 100%;
}
Problem is blue part is infront of red part.
add this to .overlay element z-index: -1; to make it behind the red
div
and if the red div is smaller so it doesnt hide it all then u can but transparent colored div at the part that u want to hide since u dont want to do it with overflow
You can give your blue div style a z-index to take it under the red one like this :
.overlay {
position: absolute;
z-index: -1;
top: 0;
right: 0;
background-color: #008CBA;
height:100%;
width: max-content;
transition: .5s ease;
}
I have a DOM that looks like this:
<body>
<div id="main">
<iframe id="content"></iframe>
</div>
<div id="overlayWrapper">
<div id="overlay"><--THIS IS EMPTY DIV--></div>
</div>
</body>
Where inside the main div I have some other stuff too, which are not very relevant here. Now, these divs have the following CSS classes.
#main {
width: 100%;
position: static;
z-index: 2;
overflow: hidden;
}
#content {
width: 100%;
height: 500px;
z-index: 3000; // This doesn't seem to help.
}
#overlayWrapper {
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000; // This needs to be at least 1000 for overlay to cover all elements in the page
position: fixed; // This seems to cause the problem?!
}
#overlay {
opacity: 1;
will-change: opacity;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
}
Now, this seems to work to some extend, as I see my overlay with the background-color value of rgba(0, 0, 0, 0.5) appearing on the screen.
The problematic part is that I cannot click on the stuff that are inside the iframe.
What I noticed is that this happens because of position: fixed style in the #overlayWrapper.
If I remove it, then I can click on the stuff from iframe but now the overlay is not visible any more.
Is it even possible to somehow keep the overlay but make the stuff on iframe clickable again?
I tried to add z-index: 3000; to iframe (i.e., to #content), but that doesn't seem to work.
Any ideas?
z-index only works on positioned elements. Which means the z-index that you applied to #content, which is the iframe, is not in effect.
#content {
position: relative;
z-index: 3000;
}
Here is the working jsfiddle.
PS: I added some links in #main to simulate the content you might have on your page.
It's because the z-index property of the div#main element should be placed before the the z-index of the div#overlayWrapper element.
Use position: relative on the <iframe> element because the z-index property gets in action with its relative.
#content {
width: 100%;
height: 500px;
/* This doesn't seem to help */
z-index: 3000;
position: relative;
}
How do I set the opacity of a div background without affecting the text in hero-text? Right now hero-text inherits the opacity of ion-slide.
<style>
.slider {
height: 100%;
width: 100%;
}
.slide {
background-size: cover;
}
#one {
background: url(img/walkthrough-1.png) no-repeat;
opacity: 0.5;
}
#two {
background: url(img/walkthrough-2.png) no-repeat;
}
#three {
background: url(img/walkthrough-3.png) no-repeat;
}
.splash {
bottom: 0px;
}
.hero-text {
}
</style>
<ion-content class="splash" scroll="false">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide id="one"><div class="hero-text">Test</div></ion-slide>
</ion-slide-box>
</ion-content>
If you need to only adjust the opacity of <ion slide id="xxx"> then I recommend breaking your .hero-text div out and adjusting your styling as necessary to keep your design correct.
With CSS you can adjust the opacity of a background color -- background-color: rgba(0, 0, 0, 0.5) -- which will create a 50% opaque black background color and not affect any children elements. But if you want to reduce the opaqueness of a background image then your only means are to use opacity which will of course affect children.
I used the same concept on a website that also used a "hero image" and I wanted the background image to fade in/out without affecting any text. You may need to use the following CSS to properly place everything:
.hero-wrapper {
position: relative;
}
.hero-wrapper > .bg {
background: ...;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}
.hero-wrapper > .text {
position: relative;
z-index: 10;
}
This should work, although it was freehand. Let me know if you want me to explain this anymore or provide a working example. Cheers ~
Edit
Here is a working example of my recommendation via Plnkr :)
Plnkr Demo
I've got a div with a background color and a transparent background image.
HTML
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
CSS
body{
background-color:white;
}
.watermark {
display: block;
position: relative;
}
.watermark::after {
content: "";
background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
jsfiddle
I want to be change the opacity of the image, but leave the background color unaffected. But when I set the opacity, both change.
Is there a way to do this?
Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.
You can check this fiddle.
You can add a ::before pseudo-element to handle the background color, so that the ::after element has the image and opacity change, and the background-color can be unaffected. Note that the background-color of the actual .watermark element needs to be transparent, as the z-index:-1 will push the pseudo-elements behind the actual one.
.watermark {
width: 300px;
height: 100px;
display: block;
position: relative;
}
.watermark::before, .watermark::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.watermark::before {
background:#C52F11;
}
.watermark::after {
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
}
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
Updated fiddle
CSS for body , whatever you want
body{
background-color:white;
}
main div(.watermark) with background color, width and height of your choice
.watermark {
width: 538px;
height: 190px;
display: block;
position: relative;
background: #C52F11;
}
watermark after CSS , image with opacity
.watermark::after {
content: "";
background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat;
opacity: 0.4;
top: 0;
left: 0;
position: absolute;
z-index: 1;
width: 538px;
height: 190px;
}
I would recommend to use two divs. Its always a good idea to have two divs in overlapping stuffs with relative and absolute. Moreover, it adds long life to your code structure before you have to change it otherwise.
It's a trick:
Insert the image into the webpage anywhere(regardless of the size).
Set the desired opacity by style="opacity:0.7;" (for opacity= 0.7).
Take a snapshot of that image.
Remove that image and insert the snapped image where ever you want.
I have a div .box with which has absolute position set at the bottom of the parent div. It does not have the top position set because the height differs for different .box divs. On hover over the parent div, I want to change its top position to 0 with the transition effect.
In the following code transition does not work if I do not define the top position by default. I have tried using top: auto and it still does not work. How can I use transition without defining the top position.
Here's my code:
HTML:
<div class="wrap">
<div class="box">
Box
</div>
</div>
CSS:
.wrap{
position: relative;
height: 200px;
width: 200px;
background: green;
}
.box{
background: yellow;
position: absolute;
bottom: 0;
left: 0;
transition: all 0.9s ease 0s;
top: 50%; /*== does not work without it ==*/
}
.wrap:hover .box{
top: 0;
bottom: 0;
}
Fiddle: http://jsfiddle.net/5hs09apn/
A slight different approach than using top: http://jsfiddle.net/5hs09apn/2/
set the height for the box, and on hover set it to 100%; let the bottom be zero, so you don't even need to use top
.box{
background: yellow;
position: absolute;
bottom: 0;
left: 0;
height:20px;
transition: all 1s ease 0s;
}
.wrap:hover .box{
height:100%;
bottom: 0;
}
.wrap {
position: relative;
height: 200px;
width: 200px;
background: green;
}
.box {
background: yellow;
position: absolute;
bottom: 0;
left: 0;
height: 20px;
transition: all 1s ease 0s;
}
.wrap:hover .box {
height: 100%;
bottom: 0;
}
<div class="wrap">
<div class="box">
Box
</div>
</div>
Add Top property in JQuery getting the current value of the Top of the .box using position().
This will be dynamic allocation of Top and will not effect your condition of varying .box height.
While doing this, you will have to add the hover effect in the JQuery part too, since the Top will be defined here and CSS wont know what to do with the hover.
Check the Fiddle here
This is the JQuery function added:
$(document).ready(function(){
var x = $('.box').position();
var myTop = x.top;
$('.box').css("top",myTop+"px");
$('.box').css("transition","all 0.9s ease 0s");
$('.wrap').bind('mouseover',function(){
$('.box').css("top","0px");
$('.box').css("bottom","0px");
});
$('.wrap').bind('mouseout',function(){
$('.box').css("top",myTop+"px");
$('.box').css("bottom","0px");
});
});
Hope this gives you what you need.
You can use:
.wrap:hover .box{
margin-bottom: 100%;
}
And try with different percentages until you get one you like. It's crude but I think it can work.