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
– technophobia, Commented Aug 14, 2015 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
– scrappedcola, Commented Aug 14, 2015 at 19:29
possible duplicate of CSS blur on background image but not on content — Ortiga
– Ortiga, Commented Aug 14, 2015 at 19:55

Community · Accepted Answer · 2017-05-23 12:14:37Z

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

When looking at the linked answer check the comment about using :before - that is the best way to do this.

Collectives™ on Stack Overflow

Target an image in Jquery

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related