Change scale of a div around its central pivot point

Question

I was reading about jQuery's scale effect, but I can't seem to get it working.

All I want to do is scale a div to 90% of its original size on its central pivot point and also fade its opacity to 80% when the user hovers over, then revert it back when their mouse leaves the div.

Answer 1

Here's how you can do it using css :

#yourDiv 
{
  width:20px;
  height:20px;
  opacity:1;
  filter:alpha(opacity=100);
  -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
#yourDiv:hover
{
  width:30px;
  height:30px;
  opacity:0.8;
  filter:alpha(opacity=80);
}

Alternatively, you can use the transform function :

#yourDiv 
{
  width:20px;
  height:20px;
  opacity:1;
  filter:alpha(opacity=100);
  -webkit-transform: scale(1,1);
      -ms-transform: scale(1,1);
          transform: scale(1,1);
  -webkit-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
#yourDiv:hover
{
  -webkit-transform: scale(1.2,1.2);
      -ms-transform: scale(1.2,1.2);
          transform: scale(1.2,1.2);
  opacity:0.8;
  filter:alpha(opacity=80);
}

Heres the fiddle : https://jsfiddle.net/o3whjz33/5/

Update : As you can see transform is more elegant. but make sure you add browser prefixes to ensure it works fine for all.

pleeease.io/play - this website does a good job of automatically adding prefixes. Cheers.

Update 2: The `transition property can be specified for individual properties instead of all, like this:

 transition: opacity 0.5s ease-in-out;
 transition: transform 0.2s ease-in-out;

you can read more about transform and transition here and here