Treehouse: Grow your CSS skills. Land your dream job.

Blur/ Frost any image with content on top

  • # October 29, 2014 at 3:01 am

    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;
    }
    # October 29, 2014 at 3:17 am

    Could you make a Codepe.io demo.

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

    # October 29, 2014 at 3:20 am

    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

    # October 29, 2014 at 3:26 am

    Try this

    CODEPEN REMOVED AS ACCIDENTALLY OVERWRITTEN

    # October 29, 2014 at 3:30 am

    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?

    # October 29, 2014 at 3:49 am

    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…

    # October 29, 2014 at 5:23 am

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

    # October 29, 2014 at 5:47 am

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

    # October 29, 2014 at 5:52 am

    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.

    # October 29, 2014 at 7:46 am

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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.