I have revolution slider installed on my WordPress. The aim is to put a dark overlay with opacity=0.3 over the slides... I`ve tried to make overlay .div with absolute position, but it covered all slider including its control elements like "next slide", "previous slide" and others.
So, i need to put this overlay just between slide image and slider controls. I`ve found code with image
<div class="tp-bgimg defaultimg" data-lazyload="undefined" data-bgfit="cover" data-bgposition="center top" data-bgrepeat="no-repeat" data-lazydone="undefined" src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" data-src="http://wp-themes/wp-content/uploads/2015/04/slider1.png" style="width: 100%; height: 100%; visibility: inherit; opacity: 1; background-image: url(http://wp-themes/wp-content/uploads/2015/04/slider1.png); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 0%; background-repeat: no-repeat;"></div>
Then i wrote this
$('.tp-bgimg').before('<div class="slider-area-overlay"></div>');
Nothing change. I dont know why.
Next step: lets do it via css.
.tp-bgimg { position: relative; }
.tp-bgimg:before {
background: rgba(0,0,0,.5);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
content: "";
}
Its cool, but slide image appears with no changes, and then, after 1-2 sreconds appear my css styles.
I really have no idea how to decide this problem, please help me.
The Slider Revolution FAQ offers 3 solutions to this:
Option 1) Enable their built-in overlay
This can be found in the slider appearance settings, sidebar. You'll want to change the "Dotted Overlay Size" option:
Option 2) Add one of the following CSS blocks to the "Custom CSS" for your slide
I personally added it to the Global Slider CSS, so it affected all my slides.
If your individual slides have captions:
.rev_slider .slotholder:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
If your individual slides do not have captions:
.rev_slider:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 99;
pointer-events: none;
/* black overlay with 50% transparency */
background: rgba(0, 0, 0, 0.5);
}
Option 3) Use image editing software, e.g. Adobe Photoshop, to manually apply a dark overlay to your images, then use the darkened images as the slide background.
The simplest approach is to add a layer above your image, paint it black, and then reduce the transparency of the black layer to around 50%.
The solutions and instructions provided by Slider Revolution are available here.
First you must to extend style of .rev_slider .slotholder (not of .tp-bgimg), because the start animation creates additional elements.
Second, the slider creates a duplicate of your image for animation, that has z-index more than source image z-index.
Try this, it will work well.
.rev_slider .slotholder:after, .rev_slider .slotholder .kenburnimg img:after {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index: 99;
background: rgba(0,0,0,.5);
}
Found a super easy way that works!
Create a new shape. Name the layer overlay and drag it to the top. Colour it black. Change opacity to 50%. Width and height should be 100%. Choose "Stretch" in Cover Mode. Almost done. One more step.
Finally, go to Behavior and switch Align to "Slide Based". This will truly stretch the overlay to 100%.
Can't find it? Check this link.
https://www.themepunch.com/faq/incorrect-position-or-size-for-text-button-or-shape/
Scroll to step 3. Adjust the Responsive Alignment.
Wish this was easier but it's not. Don't like the dotted overlay they include in the settings. Hope this helps someone.
Just incase for video add z-index and change css class:
.rs-background-video-layer:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
z-index:1;
background: rgba(0, 0, 0, 0.3);
}
I found an update for the Slider Revolution Version 6, since this won't work anymore in newer versions:
.rev_slider .slotholder:after,
#rev_slider_2_1 rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}
The secound entry will do it for this specific slideshow (#rev_slider_2_1).
To have a more common approach for all slides which is equivalent to the previous solution, you could use something like this:
.rev_slider .slotholder:after,
rs-sbg-wrap rs-sbg:after
{
content: '';
position: absolute;
z-index: 3;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: rgba(30,30,30,0.5);
}
Related
I have a somewhat strange behaviour in Chrome and Safari. I have a scaled (transform: scale()) container with a video and other elements inside of it. At some scalings the absolute positioned elements with a high z-index disappears and does not come back again.
How can I fix this?
Note that I cannot give the video element a negative z-index and I need to use overflow: hidden;.
Example
I have made an example that scales the outermost container up and down. At a specifik scale value the element with class .on-top (and text "I should always be on top.") disappears. When scaling down again it suddenly appears.
Link to exmaple: https://jsfiddle.net/iafiawik/Lcox1ecc/
Conclusions
It seems like the size of the element matters. The larger I make it, the larger is the scale value before it disappears.
I have also tested to set transform: scale(1.4) with CSS directly on the element and the behaviour is the same.
The issue does not exist if I:
Replace the video tag with a div
Remove position: absolute; from siblings to .on-top (that is, .below)
Remove overflow: hidden; from .content
If I move .on-top so it is placed after the video tag in the document flow
(But of course none of these workarounds work for me in reality because of project specific reasons. I also cannot give the video element a negative z-index and I need to use overflow: hidden;.)
Suggested workarounds from the community (thanks!)
Give the video tag a negative z-index (can't do this because I sometimes have elements placed behind the video)
Remove overflow: hidden; (I can't remove overflow: hidden;)
Browsers
I have seen this issue in Chrome (Mac) and Safari (Mac).
Update 1
Seems like this bug report pretty much covers my problem. However, it does not provide a fix for it.
Update 2
I've answered my own question by providing my solution to this problem.
Update 3
There are a lot of answers coming in that either modify the z-index of the video or adds translateZ to the .on-top element. Demos have shown that both of those approaches do fix the issue.
However, since my HTML structure is the output from a visual HTML editor (long story ...), I do not know what elements will be there or if they should be in front, below or next to a video. Therefore I am looking for a solution that does not require changes to individual elements that are inside the scaled element.
It looks like a bug in Chrome. Notice that when you scale the image, the element inspector keeps telling you that the size of #scaled is 1024x768:
Where as in Firefox:
Now, apparently, Chrome uses the wrong size to conclude that .on-top is completely outside .content and hides it because of hidden overflow (it should not be doing this but apparently it is trying to optimize away any element that displays above a video). Examples:
Scale: 1.225
Parent width: 1254.40
Child left: 1254.40 - (100 + 90) * 1.225 = 1021.65
Result: less than 1024 (partially inside)
Scale: 1.230
Parent width: 1259.52
Child left: 1259.52 - (100 + 90) * 1.230 = 1025.82
Result: greater than 1024 (completely outside)
Unfortunately I could not find an elegant solution. Ideally you should revise your HTML markup and CSS, perhaps align the top element with left edge. As a last resort, you can move the elements more towards left using transparent border:
var goalScale = 140;
var startScale = 100;
var currentScale = 100;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaleInfo = document.getElementById("scale-info");
function step() {
container.style.transform = "scale(" + (currentScale / 100) + ")";
scaleInfo.innerText = "Scale: " + (currentScale / 100);
if (currentScale === goalScale) {
shouldScaleUp = false;
}
if (currentScale === startScale) {
shouldScaleUp = true;
}
if (shouldScaleUp) {
currentScale += 0.5;
} else {
currentScale -= 0.5;
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
.scale-info {
position: fixed;
left: 0;
top: 0;
}
#scaled {
background: #cccccc;
width: 1024px;
height: 768px;
position: fixed;
left: 200px;
top: 200px;
}
.content {
height: 100%;
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
background: rgba(34, 34, 56, 0.2);
}
.below {
position: absolute;
width: 300px;
height: 300px;
right: 0px;
top: 100px;
background: purple;
z-index: 1;
opacity: 0.8;
}
.below-2 {
z-index: 3;
right: 100px;
}
.below-3 {
z-index: 4;
right: 400px;
}
.on-top {
position: absolute;
width: 50px;
right: 100px;
top: 150px;
background: pink;
z-index: 5;
padding: 20px;
/* a 200px border moves the element towards left */
border-left: 200px solid transparent;
background-clip: padding-box;
}
.on-top h1 {
font-size: 20px;
}
#video {
position: absolute;
z-index: 4;
width: 1024px;
height: 768px;
background: rgba(0, 0, 0, 0.4);
}
<div id="scale-info"></div>
<div id="scaled">
<div class="content">
<h2 class="below below-1"> I have z-index 1</h2>
<div class="on-top">
<h1> I should always be on top.<br> I have z-index 5</h1>
</div>
<h2 class="below below-2"> I have z-index 3</h2> <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<h2 class="below below-3"> I have z-index 4</h2>
</div>
</div>
Here you go: https://jsfiddle.net/Lcox1ecc/423/
You just need to add -webkit-transform: translateZ(0); to the .on-top class.
Happy Coding!
After spending a lot of time researching this problem and trying a lot of different approaches I've come to the conclusion that no solution fixes my problem. There are solutions that fix the problem if you are able to control the z-indexes of the elements that disappear, but I am unable to do so since the structure of the HTML is not known to be (it is the output of the HTML editor). I was looking for a solution that would not require changes to individual children to the scaled parent, but I have not found any so far.
This bug report pretty much covers my problem but it does not provide a fix for it.
I can confirm that this happens because the element is outside of the scaled containers original width and height:
The element is visible at scale(1.227) (red border indicates the original size of #scaled):
... but not at scale(1.228):
My solution is therefore to add another wrapping element outside the scaled element that is not scaled, but get its width and height properties updated according to its first child scale values. This element has overflow: hidden; and prevents elements from being visible.
This is not a perfect solution as one might experience a small gap between the scaled element and the outermost wrapping element (rounding issues), but it is the best I can do given the circumstances.
var goalScale = 140;
var startScale = 100;
var currentScale = 100;
var shouldScaleUp = true;
var container = document.getElementById("scaled");
var scaledContainer = document.getElementById("resized-container");
var scaleInfo = document.getElementById("scale-info");
function step() {
var contentWidth = 1024;
var contentHeight = 768;
container.style.transform = "scale(" + (currentScale / 100) + ")";
scaledContainer.style.width = contentWidth * ((currentScale / 100)) + "px";
scaledContainer.style.height = contentHeight * ((currentScale / 100)) + "px";
scaleInfo.innerText = "Scale: " + (currentScale / 100);
if (currentScale === goalScale) {
shouldScaleUp = false;
}
if (currentScale === startScale) {
shouldScaleUp = true;
}
if (shouldScaleUp) {
currentScale += 0.5;
} else {
currentScale -= 0.5;
}
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
#resized-container {
position: fixed;
width: 1024px;
height: 768px;
overflow: hidden;
border: 10px solid red;
top: 200px;
left: 200px;
}
#scaled {
background: #cccccc;
width: 1024px;
height: 768px;
position: absolute;
transform-origin: left top;
}
.content {
height: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
background: rgba(34, 34, 56, 0.2);
}
.below {
position: absolute;
width: 300px;
height: 300px;
right: 0px;
top: 100px;
background: purple;
z-index: 1;
opacity: 0.8;
}
.below-2 {
z-index: 3;
right: 100px;
}
.below-3 {
z-index: 4;
right: 400px;
}
.on-top {
position: absolute;
width: 50px;
right: -30px;
top: 150px;
background: pink;
z-index: 5;
padding: 20px;
}
.on-top h1 {
font-size: 20px;
}
#video {
position: absolute;
z-index: 4;
width: 1024px;
height: 768px;
background: rgba(0, 0, 0, 0.4);
}
<div id="resized-container">
<div id="scaled">
<div id="scale-info">
</div>
<div class="content">
<h2 class="below below-1">
I have z-index 1
</h2>
<div class="on-top">
<h1>
I should always be on top.<br /> I have z-index 5
</h1>
</div>
<h2 class="below below-2">
I have z-index 3
</h2>
<video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<h2 class="below below-3">
I have z-index 4
</h2>
</div>
</div>
</div>
One approach, if you can modify a bit your html, is wrap your problematic elements in a container that is the same size as the video and container, with the proper z-index. That way you would have clear layers of the same size and positions, into which you can position more complex elements. Like this for example:
<div id="top-container">
<div class="on-top">
<h1>
I should always be on top.<br /> I have z-index 5
</h1>
</div>
</div>
#top-container {
width: 100%;
height: 100%;
position: absolute;
z-index: 5;
}
https://jsfiddle.net/06oykj8o/4/
I made this workaround by puttingz-index:-1; on video.
https://jsfiddle.net/Lcox1ecc/312/
I really like the answer from Salman A.
The only thing that comes to mind, would be rewriting with position: relative.
But I don't know if that is an option.
I stumbled across something similar to this last week with positioning absolute elements and transforms...
I dunno if this will help you out but here is a link.
CSS transform: translate moves postion:fixed inner Div
In the end I fixed it by using a transform: translateX(none) vs translateX(0).
Super strange behavior for sure, but the link gives some more links to help make things more clear - as in its behaving per spec.
It is happening because of overflow is hidden.Here is working link
https://jsfiddle.net/Lcox1ecc/322/
.content {
overflow:visible;
}
It might be late but just posting in case somebody finds it helpful.
Add an empty div under the parent container element with transform animation and nothing will disappear anymore. The animation does not do anything but it forces the browser to render all the elements using hardware acceleration.
<div class="emptydiv"></div>
.emptydiv{
transform:scale(1);
animation:fix 3s infinite;
}
#keyframes fix{
50%{
transform:scale(1);
}
}
I have a full page overlay div which appears on a button click and covers the full page.
<div class="overlay">
</div>
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 71px;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(255,255,255, 1);
overflow-x: hidden;
transition: 0.5s;
}
What I'd like to do is to start this overlay 70px from the top, so I can see/click/use the menu.
I've tried changing top:70px however it also messes up the scrolling of the overlay div (moving the bottom scroll down by 70px as well).
I believe that I need to define the height of the overlay div somehow. However, I'd rather not define a certain height in px but rather do something that's flexible. I've tried defining it by using % but it's not an option at all - because the screen size or the overlay's size can change anytime.
Is there any way to achieve this?
You can use height: calc(100vh - 70px); to achieve the desired result
Instead of using a height and a width, use bottom and right:
.overlay {
position: fixed;
z-index: 1;
top: 71px;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
overflow-x: hidden;
transition: 0.5s;
}
<div class="overlay">
</div>
I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-
#main {
height: inherit;
bottom: 0px;
transition: transform 1.2s ease-out;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
z-index: 2;
display: block;
backface-visibility: hidden;
}`
The element that is showing no matter how much I scroll is given below-
#banner_wrapper {
margin-top: 55px;
width: 100%;
height: 900px;
position: relative;
top: 0;
left: 0;
opacity: 0.4;
z-index: 0;
}
I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-
https://robustious-methods.000webhostapp.com/
The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.
With position: fixed, this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.
If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.
If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh;.
More reading about CSS positioning here.
I have a div that I want to completely cover a page. I don't want anything on the page to be showing. The div should overlay on the page and hide everything on it. To create such an overlay I use the following CSS:
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
But if the page that the overlay is over is too long, some parts of the page still shows. How can I make it so that the div completely covers the page? Setting the position to fixed doesn't help because the overlay is multi pages long and the scrollbars get wracked.
The CSS that you're going to want to use for the overlay div is this.
.overlay {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
}
This should completely cover the page with a black div.
My fixed footer has an arrow icon on top of it. Clicking the arrow should "lower" the footer below the page until only the arrow is visible. Clicking it again should bring back the footer.
I tried playing with the bottom value but it doesn't hide the footer, only pushes it below while the page becomes taller to make room for it:
$('#footer_arrow').toggle(function() {
$('#footer_wrap').css('bottom', '-84px');
}, function() {
$('#footer_wrap').css('bottom', '0');
});
I want the same but with the footer actually disappearing below the page with just the arrow visible on top of it.
MARKUP:
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
CSS:
#footer_wrap {
position: absolute;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(images/footer_arrow.jpg) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
A couple things. First off, I recommend using toggleClass() instead of toggle(). That way, you can just add a class with the required CSS, and toggle it using toggleClass(). This way, you can change any styles necessary from pure CSS, instead of making the modifications in the JavaScript code. However, the toggle() from jQuery's event handling suite that you are currently using will work just fine nonetheless.
Secondly, to move the footer off screen, you'll need to use fixed positioning instead of absolute on #footer_wrap. Otherwise, the bottom is moving relative to the page, which means it just extends it. However, with fixed, the element is positioned at a fixed point in the viewport, which can be moved off screen without extending the page.
$('#footer_arrow').click(function() {
$('#footer_wrap').toggleClass('down');
});
#footer_wrap {
position: fixed;
bottom: 0;
height: 84px;
}
footer {
position: absolute;
bottom: 0;
z-index: 9999;
position: relative;
}
#footer_arrow {
position: absolute;
width: 61px;
height: 23px;
top: -23px;
left: 50%;
background: url(http://www.placehold.it/61x23) 0 0 no-repeat;
z-index: 9999;
cursor: pointer;
}
.down {
bottom: -84px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='footer_wrap'>
<footer>
<div id='footer_arrow'></div>
<div>
content
</div>
</footer>
</div>
What You have to do imho is not .toggle() a #footer_arrow element. You need to .toggle() a #footer_wrap element after clicking on #footer_arrow
Look into this fiddle: http://jsfiddle.net/tdcrsn2j/
I've changed Your HTML & CSS a little, but You can bring it back. It was done just to show case.
go with this
when you want to show
$('#footer_wrap').css({"display":"block"});
when you want to hide
$('#footer_wrap').css({"display":"none"});