Is it feasible to use JavaScript or jQuery to fade only the embedded image instead of the entire div, revealing the background image of the div? I have multiple instances of the classes below and wish to apply these changes only to the selected ones.
For example:
.image {
width: 200px;
background-image: url(elements/pattern.png);
}
<div class="box">
<div class="image"><img src="pics/001.jpg"/></div>
<div class="project">Title</div>
</div>
$('.image').mouseover(function() { $(this img).stop().animate({opacity:.7}, 200); });
$('.image').mouseout(function() { $(this img).stop().animate({opacity:1}, 600); });
Additionally, can specific classes within a div be targeted?
For instance:
$('.image').mouseover(function() { $(**this .project**).css({color:'#FFF'}); });
$('.image').mouseout(function() { $(**this .project**).css({color:'#999'}); });
Thank you
....
SOLVED
Successfully implemented by using the find() method as suggested and enclosing the image in an additional class. Now the image fades, allowing the background pixel pattern of .image to show through:
<div class="box">
<div class="image"><div class="p"><img src="pics/001.jpg"/></div></div>
<div class="project">Title</div>
</div>
$('.box').mouseover(function() {
$(this).find('.p').stop().animate({opacity:.3}, 200);
$(this).find('.project').css({color:'#FFF'});
});
$('.box').mouseout(function() {
$(this).find('.p').stop().animate({opacity:1}, 600);
$(this).find('.project').css({color:'#FFF'});
});
Cheers!