Button Dock

Circular buttons with hover animations. Would like animation to push outward in all directions rather than just down and to the right.

by Arnaud

HTML

<section id="cause_container">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
    <img src="http://blog.mattforhire.ca/wp-content/uploads/2011/08/css_circle.png" class="cause_button">
</section>

CSS

img {
    position:absolute;
}
#cause_container {
    width:1110px;
    height:200px;
    float:left;
    padding-left:120px;
}
.cause_button {
    position:absolute;
    float:left;
    padding-top: 62.5px;
    position:inherit;
    margin:5px;
    width:75px;
    height:75px;
    opacity:0.75;
}

JavaScript

$(document).ready(function () {
    $(".cause_button").css("cursor", "pointer");
    $(".cause_button").on('mouseenter', function () {
        $(this).stop().animate({
            height: 100,
            width: 100,
            opacity: 1.0
        }, "fast");
    });
    $(".cause_button").on('mouseleave', function () {
        $(this).stop().animate({
            height: 75,
            width: 75,
            opacity: .75
        }, "fast");
        s
    });
});