So, I'm developing a website based on CSS3. Here is a part of code which trying to make the background blur.
.blur {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
I know that IE is not supported for blur filter. I search for article they said I have to use SVG to solve this problem. But somehow my website is using in a scenario that there is no internet which mean that I cant access any url when browsing it. Is there anyway to solve this problem without using SVG?
One way that I can think of is basically just duplicating the background container and changing the opacity and moving the image slightly to give yourself a blur. Another option you have would be to just create another image to put on your server, and just use photoshop to blur it and then switch the picture
img:first-child {
opacity: 1;
}
img {
opacity: 0.2;
position: absolute;
top: 0;
}
img:nth-child(2) {
left: 1px;
}
img:nth-child(3) {
left: 2px;
}
img:nth-child(4) {
left: 3px;
}
img:nth-child(5) {
left: 4px;
}
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
<img src="https://placekitten.com/600/600"/>
Related
I've added this .blur class to body tag to blur whole website.
CSS
.blur {
filter: blur(1px);
filter: url("blur.svg#gaussian_blur");
-webkit-filter: blur(1px);
-o-filter: blur(2px);
}
HTML
<body class="blur">
...
<div class="mustBeClear"></div> <!-- somewhere in the page-->
...
</body>
How to keep .mustBeClear class not blured.
I've tried
.mustBeClear{
filter: none;
-webkit-filter: none;
-o-filter: none;
}
but, it does not work!
What you are trying to do is not possible. Because SVG filters get applied to an entire element at once, you cannot then selectively "undo" the filter for a single child element.
What I would recommend instead is to only blur the element that you want to be blurred, then you can use absolute positioning on another element on top that does not have the blur effect.
Here is a live example to illustrate what I'm talking about:
.container {
position: relative;
top: 50px;
left: 50px;
}
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-o-filter: blur(5px);
}
#text {
position: absolute;
left: 50px;
top: 50px;
}
<div id="container">
<div class="blur">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
<div id="text">Not Blurred Text</div>
</div>
I am trying to add a colorful transparent overlay when you hover over an image (any color: purple, blue, red, orange would be great), but instead I am getting a white transparent overlay. Please note, I am using bootstrap grid so that my images stay responsive. I've tried everything I can think of... adding a background-color: blue with some opacity, but I am stuck. White overlay looks okay, but I wanted to have some fun with the color. Please see my code below and tell me what I need to do. Many thanks!
<div class="container">
<div class="row">
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers4.jpg" class="img-responsive">
</a>
</div>
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers5.jpg" class="img-responsive">
</a>
</div>
</div> <!-- closes div row -->
</div> <!-- closes div container -->
CSS code:
.hover12 img {
background-color: blue;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 img:hover{
opacity: .5;
}
opacity fades out the entire element including its background, it does not make the contents transparent and the background show through. What you would want to do instead is either put an element with your color (blue perhaps) underneath the image and make the image opaque (with opacity), or hide and show an element on top of the image that has some transparency.
Here is an example. On hover, the image becomes 50% opaque and you can see the blue element under it showing through.
.img-container {
background-color: blue;
display: inline-block;
line-height: 0;
}
.img-container img:hover {
opacity: .5;
}
<div class="img-container"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQU-rOCZDSdyIGgSvZhU-lqIhG32Yd8KrwI3gWKXSCayFXQuJTx0g" /></div>
Edit:
I just looked at your code again and realized you basically have it right, except you have the background color set on the img element, but it should be set on the element that contains the img, which is the .thumbnail class, so try just adding:
.thumbnail {
background-color: blue;
}
This is probably best accomplished using a pseudoelement that overlays the image. Here is how to create a pseudoelement that overlays an image and has reduced opacity when the image is rolled over:
#theimg {
position: relative;
display: inline-block;
}
#theimg::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
opacity: 1;
}
#theimg:hover::after {
opacity: .5;
}
<div id="theimg">
<img src="https://i.imgur.com/LDR6AWn.png?1" />
</div>
Easiest way is to use :before to make a semi-transparent overlay:
img:hover:before {
content: '';
position:absolute;
top:0;left:0;bottom:0;right:0;
background:rgba(0,0,255,0.3);
}
Downside is that it will block the image being clickable, and may be an issue when you are using images with CSS background instead of the <img /> in HTML.
Another way, if Internet Explorer support isn't an issue (which could be the case if this effect is just for show), you could play around with the CSS filter. It's not as easy as overlaying a transparent image over the image, but you can get some very nice effects:
img.grayscale:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
img.contrast:hover { -webkit-filter: contrast(150%); filter: contrast(150%); }
img.brightness:hover { -webkit-filter: brightness(1.5); filter: brightness(1.5); }
img.hue-rotate:hover { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
img.saturate:hover { -webkit-filter: saturate(2); filter: saturate(2); }
img.blur:hover { -webkit-filter: blur(2px); filter: blur(2px); }
img.invert:hover { -webkit-filter: invert(1); filter: invert(1); }
img.sepia:hover { -webkit-filter: sepia(75%); filter: sepia(75%); }
For your question, I would recommend using .hue-rotate and maybe add a CSS transition. Note: you can combine effects!
Play around with sliders:
http://www.cssreflex.com/css-generators/filter/ or http://html5-demos.appspot.com/static/css/filters/index.html
I am trying to do a css blurry glass effect with filters, but it's not working in the way it should.
The div has no opacity at all and it's not blurry.
Code(CSS):
#siteDesc
{
text-align: center;
background-color: #FFFFFF;
width: 1200px;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after
{
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
Edit:
Link to jsfiddle: http://jsfiddle.net/qy1sar8h/
Updated for relevance Sep 2021
There is a backdrop-filter CSS property that can achieve the frosted glass look.
See https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter for full details.
It is part of CSS Filter Effects Module Level 2 and the syntax for a blur filter is as follows:
backdrop-filter: blur(10px);
The background of the element will be blurred, but not the content or descendent elements.
To create a frosted glass effect, combine this property with an RGBA background colour that gives the background some transparency, e.g.:
background-colour: Reba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
This feature is available in all major browsers except Firefox (available behind a flag from Firefox 70) and Internet Explorer.
The technique you attempted will blur the full contents of whatever element it is applied to, and not just the background as you intended.
The only technique I know involves faking the blur with positioned background images either using a pre-blurred image or taking advantage of the filter CSS property to blur the original. I don't use this technique because it's too easy for the images to be out of alignment and your trick no longer looks good.
The pseudo-element won't render without a content property and, in any case will not blur the associated parent div.
Applying a filter to the pseudo-element will only blur the content of the pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
background-color: #FFFFFF;
margin: 0 auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
}
#siteDesc:after {
content: 'SOME TEXT';
opacity: 0.7;
filter: blur(1px);
-moz-filter: blur(1px);
-webkit-filter: blur(1px);
-o-filter: blur(1px);
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
If you apply the blur to the div itself you get this: JSFiddle Demo
EDIT: It's not entirely clear how this is supposed to look but the only option I see for blurring the background is not to have background on div element itself but rather simulate a background with a pseudo-element.
body {
background-color: #37E1E4;
}
#siteDesc {
text-align: center;
width: 90%;
margin: 10px auto;
margin-top: 30px;
padding: 10px;
padding-bottom: 20px;
border-radius: 5px;
position: relative;
font-weight:bold;
}
#siteDesc:before {
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(1px);
filter: blur(1px);
background-color: rgba(255,255,255,0.7);
z-index:-1;
}
<div id="siteDesc">
<p>Hello, this is my fiddle.</p>
</div>
How can I apply a Gaussian blur using CSS to a DIV which contains text. Basically, what I want to achieve is to have the box with a gaussian blur but the text in a normal way. Can this be done? I don't know how, I've been trying but I just can't.
Example:
Like I have my div at opacity: 0.75 I would like my div to be transparent but with gaussian blur, since in the background I have a moving image, so I want the box to be blurred.
Apply following CSS to your block:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
However, this property works only in modern browsers: compatibility table
Well I don't think you can achieve what you are looking for without some extra div or even better a pseudo-element. My suggestion would be:
div {
position:relative;
width: 10em;
height: 20em;
padding: 1em;
}
div::before {
content: '';
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background: url(http://upload.wikimedia.org/wikipedia/en/6/6c/Some_Girls.png);
z-index: -1;
}
Your question is not too clear though so I am not sure if this is what you are looking for...
Pen: http://codepen.io/marczking/pen/dqxwG
Anyway, I blurred a div via this code:
background: #FFFFFF;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
opacity: 0.4;
But I want to put inside that blurred div some text, and the stays stays blur too after all, is there a way to cause the text itself only to not blur?
No, but:
You can position another element over the blurred element in that case.
See: z-index for this, along with the position: attribute.
Important: the element cannot be inside the blurred element and just have a higher z-index only. It needs to be outside it, positioned over the other one, and have a higher z-index than the blurred element.
Here is a very basic example, using position: absolute;:
http://jsfiddle.net/digitalextremist/ky3Ca/3/
Excerpt:
.unblurred {
position: absolute;
top: 5px;
left: 5px;
z-index: 9;
}
There are a lot of ways to do positioning. The above jsfiddle only shows one way to get you started.
You can position the text over the div using some other html element, check this fiddle:
http://jsfiddle.net/7PxzL/1/
HTML:
<div></div>
<span>This is the Text</span>
CSS:
div {
width:100px;
height:100px;
background: #cccccc;
z-index:-1px;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}
span {
position:absolute;
top:10px;
left:10px;
}