Is there a way to set the background of text blurry over an image? Like
h1 {
text-align: center;
background-color: <blurry>;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>The Last Will and Testament of Eric Jones</h1>
</body>
</html>
EDIT most of the solution online show how to blur the image. What I am seeking for is something to apply a blur filter just to the background of the text element. I don't know if you can set this inside h1 element or not.
In this example, I used an image as background for the blur effect to be more evident, but if you want to change the image by a color, simply replace the background-image attribute with background-color: # 000000;
Note that # 000000 is your desired color in hex, so you should override this value.
<body>
<div class="background">
</div>
<h1 class="text"> The Last Will and Testament of Eric Jones</h1>
</body>
CSS:
.background {
position: absolute;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width: 1200px;
height: 800px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.text {
position: relative;
z-index: 3;
}
Look at the example I made
Just add opacity
.element{
opacity : 0.1;
}
Related
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"/>
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>
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;
}