Using jQuery to animate SVG color and scale on hover

Question

I have an icon that I made, and am trying to both change the color on hover, and have the white square scale 50% via origin top-left of it's current location.

So far I'm able to change the color and the scale of the square on hover in/out, but I can't wrap my head around animating it. Any help, friends?

My CodePen

Answer 1

I have added this css3 transition, to set the transition time for the scaling and background changing:

.logo-square, .logo-bg{
  transition: 0.7s;
}

And using this jQuery to scale the box: (since you are using jQuery. Note: You can do this in pure CSS using :hover selector)

$('.logo-square').css({
    '-webkit-transform': 'scale(0.6)',
    '-moz-transform': 'scale(0.6)',
    '-o-transform': 'scale(0.6)'
});

and (to revert back)

$('.logo-square').css({
    '-webkit-transform': 'scale(1)',
    '-moz-transform': 'scale(1)',
    '-o-transform': 'scale(1)'
});

using .css instead of .attr()

SAMPLE DEMO

UPDATE: You can use pure CSS to solve the problem, using the :hover selector

like this:

.logo-square, .logo-bg{
  transition: 0.7s;
}

.bm-logo:hover > .logo-square{
   -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -o-transform: scale(0.6);
}

.bm-logo:hover > .logo-bg, .bm-logo:hover > .logo-square{
  fill: #b565a7; 
}

SAMPLE DEMO - USING PURE CSS