Target an image in Jquery

Question

I need to target just the image, the only problem is is that the image is set as a background on the class "hero1project3". I need it to stay in this class, is there a way in my jquery that I can tell just the image to blur for example ".hero1project3 img"

HTML:

 <div class="hero1project3">
     <div class="blur">
 </div>

 <div id="hero1titleproject1">
     <h1>Information Design: <br>Zumerset Cyder Appl's.</h1>
 </div>

Jquery:

$(document).scroll(function(){
    if($(this).scrollTop() >0){
        $('#hero1titleproject1').css({'webkit-filter':'blur(5px)', 'filter':'blur(5px)'});
    } else {
        $('#hero1titleproject1').css({'webkit-filter':'', 'filter':''});
    }
});

CSS:

.hero1project3 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../Information_Design_Zumerset_Project3_hero.jpg);
    background-position:50%;
    background-size:cover;
    transition:all .5s
}

div.project.project3img2 {
    background-color: rgb(255,255,255);
}

Not sure why you're getting downvoted - seems like you've tried to solve your problem and need help. — technophobia, Aug 14 '15 at 19:25
If the image is a background it's not in the dom to target. I wouldn't expect css to affect the background image at all. To apply the blur I suspect you need an actual image tag in the dom. — scrappedcola, Aug 14 '15 at 19:29
Maybe this will help: http://stackoverflow.com/a/20411411/752527 — Hanlet Escaño, Aug 14 '15 at 19:30
possible duplicate of [CSS blur on background image but not on content](http://stackoverflow.com/questions/20411257/css-blur-on-background-image-but-not-on-content) — Ortiga, Aug 14 '15 at 19:55

score 2 · Answer 1 · edited May 23 '17 at 12:14

2

Using img as a selector means you are trying to select an img tag underneath hero1project3, which does not exist since you are using a background image set via CSS to .hero1project3.

See this answer to know how to blur a background image: How to apply a CSS 3 blur filter to a background image

edited May 23 '17 at 12:14

Community

1
1

answered Aug 14 '15 at 19:28

user1399437

23
1
6

When looking at the linked answer check the comment about using :before - that is the best way to do this. – JohnCH Aug 15 '15 at 17:31

Target an image in Jquery

1 Answers1