Blur/ Frost any image with content on top

[AggressiveSimon]

Hello,
I want to use pure CSS3 to blur any image with a frost, but still have content on top of it. Below is the code I have so far.

<div class="container">
    <div class="frost"></div>
    <div class="content"><p>Dont Blur Me</p></div>
</div>

.container {
    height:300px;
    width:300px;
    position: relative;
    background-image: url(https://i.imgur.com/4eair9X.jpg);
}
.frost {
    content:"";
    -webkit-filter: blur(10px);
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    
}

.content{
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

.content p {
margin-top: 50%;
text-align: center;
}

[Paulie_D]

Could you make a Codepe.io demo.

You should be aware that the filter property has limited support tough.

[AggressiveSimon]

I tried but for some reason it failed, so here is a fiddle instead.
http://jsfiddle.net/2gbkmedu/2/

Edit: Here is the codepen
http://codepen.io/anon/pen/clJDp

[Paulie_D]

Try this

CODEPEN REMOVED AS ACCIDENTALLY OVERWRITTEN

[AggressiveSimon]

Thank you Paulie. How does a radial gradient achieve this effect?

Is it possible to make it have a solid border?

Edit:
So I have made it 100% width and height, how can the blur? go all the way to the edge without leaving a white space?
http://codepen.io/anon/pen/qInDE

[Paulie_D]

How does a radial gradient achieve this effect?

It doesn’t as such. the image is blurred using the filter property…the gradient just adds a layer of “frosting”.

The ‘white-space was just the margin I put on the container

A border…on what?

Ideally an image of what you are trying to achieve would be useful rather that me having to guess…

[AggressiveSimon]

The image linked below shows the desired effect and the current effect.
http://i.imgur.com/rmHu78e.png

[Paulie_D]

Oh…I just remove the gradient…it looks more like what you are after:

http://codepen.io/Paulie-D/pen/EnxKy

[AggressiveSimon]

I forgot to add the gradient into the image.
The point was that one image has a soft border, and the other does not. It is the latter effect which I am attempting to achieve.

[Paulie_D]

Guess I’m just not getting what you are after.

http://codepen.io/Paulie-D/pen/lCEce

[Author]

Posts