I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".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);
}