I want to blur the entire background once a div appeared. I have hidden the div and it will appear in button click. on that div appearance, the entire background should be blurred. how can I do that?
It would have been better if you have provided us with the code you are working with. Nonetheless, check the following out. It might help you.
You can do this using backdrop-filter: blur() instead of filter: blur() to make sure the elements behind the .backdrop are blurred, instead of the element itself.
I hope the code is self-explanatory (the complete code on CodePen). But if you are wondering, it's just the .backdrop positioned over all the elements using position: fixed; and z-index:9998;. And then the .except is placed over the .backdrop using z-index: 9999; which is one level higher than the .backdrop but only using position: relative; so it's at the same place as it was before. You can position it wherever you want it to be.
This way you can blur everything including the backgrounds except for the desired element and you don't need to reposition the .except element somewhere else this way if you don't want to.
Let me know if you need more clarification.
.except {
background: white;
position: relative;
z-index: 9999;
}
.backdrop {
position: fixed;
z-index: 9998;
top: 0; bottom: 0; left: 0; right: 0;
background: #33333377;
backdrop-filter: blur(4px);
}
<div class="wrap">
<div class="content">Some text</div>
<div class="content except">Some text</div>
<div class="content">Some text</div>
<div class="content">Some text</div>
</div>
<div class="backdrop"></div>
Demo with the complete code on CodePen
you could do the following
in your css
.blur {
filter: blur(5px);
}
javascript file
document.querySelector("*").classList.add("blur");
document.querySelector("div_id").classList.remove("blur");
Related
Here's the deal. I have troubles while trying to hide a paragraph element with a class"text".Link to the pen I've tried display:none but it didn't work for me either.
<style>
.img {
position: absolute;
left: 40%;
transform: translateX(-50%);
}
.p-wrap {
color: #fff;
position: relative;
display: none;
}
.text {
display:none;
color: #000;
position: absolute;
left: -130px;
}
</style>
<div class="img">
<div class="p-wrap">
<p class="text"> Oh hey Mark</p>
</div>
<img
src="https://source">
</div>
besides from display:none,other alternatives are
visibility: hidden;
opacity:0
But be carefull , with this element is still present in DOM(space is still allocated.)
You missed a closing quote mark there on a div with class p-wrap, so your DOM is not correctly generated.
<div class="img">
<div class="p-wrap">
<p class="text"> Oh hey Mark</p>
</div>
<img
src="https://nypdecider.files.wordpress.com/2018/09/the-room-youtube.jpg?quality=80&strip=all&w=646&h=431&crop=1">
</div>
This will fix it.
Use visibility:hidden
.img {
position: absolute;
left: 40%;
transform: translateX(-50%);
}
.p-wrap {
color: #fff;
position: relative;
display: none;
}
.text {
visibility:hidden;
color: #000;
position: absolute;
left: -130px;
}
<div class="img">
<div class="p-wrap">
<p class="text"> Oh hey Mark</p>
</div>
<img
src="https://source">
</div>
There are multiple ways of hiding an element in CSS. You can hide it by setting opacity to 0, visibility to hidden, display to none or by setting extreme values for absolute positioning.
Have you ever wondered why we have so many techniques of hiding an element when they all seem to do the same thing? All of these methods actually differ slightly from each other and this difference dictates which one of them is to be used in a specific situation. This tutorial will cover the minor differences that you need to keep in mind when hiding an element using any of the methods above.
Opacity
The property opacity is meant to set an element’s transparency. It was not designed to alter the bounding box of the element in any way. This means that setting the opacity to zero only hides the element visually. The element still occupies its position and affects the layout of the web page. It will also respond to user interaction as well.
.hide {
opacity: 0;
}
Visibility
This property is also able to animate as long as the initial and final states have different values. This ensures that the transition between the states of visibility can be smooth instead of being abrupt.
.hide {
visibility: hidden;
}
Display
All the descendants of our element will be hidden as well. This property cannot be animated so the transition between various states is always going to be abrupt.
Please note, the element is still accessible through the DOM. You will be able to manipulate it just like with any other element.
.hide {
display: none;
}
Position
Suppose you have an element that you would like to interact with but you do not want it to affect the layout of your web page. No property up to this point can handle this situation properly. One thing that you can do in this situation is to move the element out of the viewport. This way it won’t affect the layout and will still be actionable. Here is the CSS to do that:
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
Clip-path
One more way of hiding elements is by clipping them. Previously, this could be done with the clip property but that has been deprecated in favor of a better property called clip-path. Nitish Kumar recently introduced the clip-path property here at SitePoint, so feel free to check that one out for more advanced usage of the property!
Keep in mind that the clip-path property as used below is not fully supported in IE or Edge yet. If using external SVG files for your clip-path, support is even more limited (that does not apply below). The clip-path property when used to hide an element looks like so:
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
I want to achieve the type of effect seen at Forde + Nichol - http://fordenicol.com/
I would like the initial div to scroll away and then reveal the main content below and be able to continue scroll down the page. I have looked at a variety of reveals and footer reveals that are available online but fixed height cause an issue when attempting to continue scroll through content.
https://jsfiddle.net/3gkazmb8/2/
HTML
<div class="overlay"></div>
<div class="content">
<p>Content Information</p>
</div>
</body>
CSS
body {
padding-bottom: 600px;
}
.overlay {
height: 1200px;
position: relative;
z-index: 2;
background: red;
}
.content {
height: 1800px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-image: url(http://lorempixel.com/g/400/200/);
background-color: #000;
z-index: 1;
}
.content p{
color: yellow;
font-size: 50px;
padding-top: 500px;
}
This is the layout and general idea of how I want to achieve the effect but the fixed height and positions of the divs cause the content to be hidden.
Any help would be greatly appreciated.
Here we go,
Scroll Magic is an awesome plugin I have used in the past,
Use that with GSAP animation library and you will have smooth animations.
The tutorial is in the link I have attached
http://scrollmagic.io/examples/basic/section_wipes_natural.html
Finally got there. Unfortunately it wasn't fully possible with CSS so had to revert to using the plugin Curtains to achieve the transition - http://curtains.herokuapp.com/
Thanks everyone for your replies!
I need to create a page which has a full screen cover image and 2 div blocks containing content that sit on top of this cover image.
The div blocks need to have a slightly greyed blurred background effect - similar to the effect used by the Yahoo Weather app
(https://www.google.co.uk/search?client=firefox-a&hs=xQa&rls=org.mozilla:en-US:official&channel=fflb&q=yahoo+weather+design+blur&bav=on.2,or.r_qf.&bvm=bv.47883778,d.d2k&biw=1484&bih=770&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&ei=Mge_Uau-IKiu0QXzyYGADw#facrc=_&imgrc=W3T7q2pDARrKhM%3A%3ByIOTpupTmTIpRM%3Bhttp%253A%252F%252Fimg.gawkerassets.com%252Fimg%252F18l0kjccthmtjjpg%252Foriginal.jpg%3Bhttp%253A%252F%252Fwww.gizmodo.com.au%252F2013%252F04%252Fyahoo-just-made-the-most-beautiful-weather-app%252F%3B960%3B540)
but rather than blurring the entire background I need only the overlayed div background to be blurred - rather than the whole thing, which gives me a headache!
Has anyone managed to acheive a similar result - or have any idea if its possible via Jquery/ Pure Css or a combo?
There is a jQuery plugin called blur.js that claims to do what you want. Haven't checked it though.
I don't know if this will help, but it gives a blur effect.
A similar question was asked here:
Background blur with CSS
The developer used a svg blur to give a blur effect.
Don't know if that helps.
I just figured out how to do this! The background and the content divs both need to have the same background with the same positioning/size. and use background-attachment: fixed on both of them. You can blur the div with -webkit-filter: blur(5px);. You may need to use z-index depending on the location of other things on the page. Also if you want content inside the blurred div it will have to be in a completely separate div positioned on top of it, otherwise everything inside will get blurred too. Here's the code:
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
I couldnt get jsfiddle to work for this, so if someone could make that it would be awesome. The whole idea here is that both the divs have the exact same content in the same place. That way no matter where the blurred div moves it will look like its blurring the background.
you can probably use the css3 filter:blur() property to get the image blurred, but you would need to have the background image the same (and in the same position) as the background element. you would also need to make sure that the blurred element is separate from the content you want to add (:before) because otherwise it'll blur the content as well. You can change the saturation, and other elements as well using the filter property.
I am working on this site http://www.group---me.my/national/
Please remove --- in the url.
For certain deals, there is options, and when you click on the BuyNow button, a popup comes up. I would like to dim (darken) the background, while the popup is shown.
To do this, on my local test site, I added the following div class:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 333%;
background-color: black;
z-index: 20;
opacity: 0.8;
filter: alpha(opacity=80);
}
Then on the Buy Now button, I added
onclick="javascript:document.getElementById('fade').style.display='block';"
I also have this in the site
<div id="fade" class="overlay"></div>
But the problem is, the overlay always hides all the layers, including the popup, regardless how high I set the popup div's z-index.
Any help is much appreciated. Thanks.
Which browser? Which version. I am getting it right here. It should hide right?
And it is prominent. What is that you wanna do here?
If you doesn't specify some parent element to be relative positioned, your overlay div will be positioned relative to body so it can be above all other content.
I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob