CODEWITHSUNDEEP
javascriptcssimagetextblur
Khalil Najjar
Khalil Najjar

Reputation: 115

How to blur background image on hover but not the text

Hello I just started web developing and I am stuck at trying to blur the background image of a div on hover, but without affecting the text.

As you can see I have an id called c1 and I used a javascript function to display text on hover, which is working great.

Now I want to use css/javascript to blur the background image without bluring the text. Is this possible?

My CSS:

#c1 {
    float: left;
    width: 300px;
    padding: 30px;
    margin: 15px;
    background-image: url(images/cd.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    height: 150px;
}

#c1:hover {
    -webkit-filter: blur(5px);
}

My HTML:

<div id="productos">
    <a name="jproductos"></a>
    <ul>
        <div id="c1">
        </div>
    </ul>
</div>

Upvotes: 1

Views: 5007

Answers (2)

gopalraju
gopalraju

Reputation: 2309

#c1 {
 position:relative;
 float: left;
 width: 300px;
 padding: 30px;
 margin: 15px;
 border-radius: 20px;
 height: 150px;
 overflow:hidden;
}

#c1:after{
 content:'';
 display:block;
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 bottom:0;
 right:0;
 background: url(images/cd.png) no-repeat center;
 background-size: cover;
}

#c1:hover:after{
 -webkit-filter: blur(5px);
}

Upvotes: 1

Kevin F
Kevin F

Reputation: 2885

You would have to structure your html differently. If you make a relative container and place the image as a separate div from the text:

<div class="container">
    <div class="image"></div>
    <div class="text">Text</div>
</div>

.container{
    position: relative;
}

.image, .text{
    position: absolute;
    top: 0;
    left: 0;
}

.image{
    -webkit-filter: blur(5px);
}

This way the text and image aren't parent/child/same element and you can blur only the image, but still have the text appear as if it is on the image

Upvotes: 0

Related Questions