Question

I’m trying to create a scale functionality for certain images when they are hovered, while maintaining a rounded image effect using CSS3. See code below:

  $(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '99'});
      $(this).find('span').addClass('active');
      $(this).find('span').addClass("hover").stop().animate({ marginTop: '-24px', marginLeft: '-24px', top: '50%', left: '50%', width: '80px', height: '80px', WebkitBorderTopLeftRadius: 40, WebkitBorderTopRightRadius: 40, WebkitBorderBottomLeftRadius: 40, WebkitBorderBottomRightRadius: 40, MozBorderRadius: 40, BorderRadius: 40 }, 250); }
  }, function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '0'});
      $(this).find('span').removeClass('active');
      $(this).find('span').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '32px', height: '32px', WebkitBorderTopLeftRadius: 32, WebkitBorderTopRightRadius: 32, WebkitBorderBottomLeftRadius: 32, WebkitBorderBottomRightRadius: 32, MozBorderRadius: 32, BorderRadius: 32 }, 250); }
  });

The HTML looks like this –

<ul class="nodes">
  <li>
    <a href="/">
      <span style="background: url(image.jpg) no-repeat center center; width: 32px; height: 32px;">
        <img src="image.jpg" style="opacity: 0;" />
      </span>
    </a>
  </li>
</ul>

What I can’t get to work is the MozBorderRadius when animating (it doesn’t keep a consistant circle, WebkitRadius and BorderRadius seems to work though), as well as keeping the image centered as it animates. I figured giving the image a MarginTop and marginLeft of half the amount of width and size added to it when animating would do, but it just aligns itself to the bottom.

Answer 1

You don’t have to set all corners of webkit radius, just “WebkitBorderRadius” is enough.

And for animating MozBorderRadius, you can use ( “border-radius” : “40px” ). Here is your code working on webkit and moz :

$(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '99'});
        $(this).find('span').addClass('active');
        $(this).find('span').addClass("hover").stop().animate({ 
            marginTop: '-24px', 
            marginLeft: '-24px', 
            top: '50%', 
            left: '50%', 
            width: '80px', 
            height: '80px', 
            'border-radius' : '40px',
            WebkitBorderRadius: 40,
            BorderRadius: 40,
        }, 250);
    }
}, function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '0'});
        $(this).find('span').removeClass('active');
        $(this).find('span').removeClass("hover").stop().animate({ 
            marginTop: '0', 
            marginLeft: '0', 
            top: '0', 
            left: '0', 
            width: '32px', 
            height: '32px', 
            'border-radius' : '32px',
            WebkitBorderRadius: 32,
            MozBorderRadius: 32, 
            BorderRadius: 32
        }, 250); 
    }
});