Resizing divs by scale

by chrisloughnane

HTML

<div class="example"></div><div class="example"></div>

CSS

.example:hover {
    cursor: pointer;
}
.example {
  border-radius: 50px;
  border: 3px solid #BADA55;
     width: 100px;
    height: 100px;
    float: left;
    margin: 0 20px 20px 0;
    -webkit-transition: all .5s ease .25s;
    -moz-transition: all .5s ease .25s;
    -ms-transition: all .5s ease .25s;
    -o-transition: all .5s ease .25s;
    transition: all .5s ease .1s;
}
.example.small {
    -moz-transform: scale(0.10);
    -webkit-transform: scale(0.10);
    -o-transform: scale(0.10);
    -ms-transform: scale(0.10);
    transform: scale(1.50);
}

JavaScript

$(function() {
    $(".example").click(function(){
       $( this ).toggleClass( "small" );
    });
});