jquery - Change scale of a div around its central pivot point -

i reading jquery's scale effect, can't seem working.

all want scale div 90% of original size on central pivot point , fade opacity 80% when user hovers over, revert when mouse leaves div.

here's how can using css :

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

alternatively, can use 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: 0.5s ease-in-out;           transition: 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 fiddle : https://jsfiddle.net/o3whjz33/5/

update : can see transform more elegant. make sure add browser prefixes ensure works fine all.

pleeease.io/play - website job of automatically adding prefixes. cheers.

update 2: `transition property can specified individual properties instead of all, this:

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

you can read more transform , transition here , here