Question

I have a thumbnail image inside a div. I use another image as the background for the div so that it frames the thumbnail. I need to be able to change the position of the background image from bottom center to top center when I mouse over the thumbnail.

Here is the html:

<div class="image">
   <a class="zoom1" title="Sample title" href="images/xyz-large.jpg"><img src="images/portfolio-xyz.jpg" alt="XYZ Inc" /></a>
</div>

Here is the css:

div.image     { width: 314px; height: 231px; background: url(images/bg_portfolio-img.png) no-repeat bottom center; }
div.image img { position: relative; top: 8px; left: 8px; }

I would like to do this with just the css and it would be something like this:

div image a.zoom1:hover  { background-position: top center;}

However, that obviously doesn’t work. I am open to a jQuery solution but I would require some assistance there as well.

Thanks in advance for the help!

Answer 1

Try something like this using .hover():

$(".image img").hover(function() {
  $(this).closest(".image").css({ 'background-position': 'top center' });
}, function() {
  $(this).closest(".image").css({ 'background-position': 'bottom center' });
});

When hovering over a <img> inside a class="image" it looks up to the div and swaps the background, same when you hover out in reverse. You can add more properties in the .css() call if you want to spice it up more, read here for details.