addThis Sharing Buttons for Wordpress, how to animate? - css

Question

I'm looking for a plugin/code that can give some nice mouse hover animation over addThis share buttons, but still want to enjoy the 1-click tweet,like,etc. feature of addThis default buttons.
The one i have now is default, looks like,
What i want is something similar to the one used in arduino.cc blog, the default 1-click buttons are hidden by default and get visible only on mouse hover.
eg:-
How can i achieve this?

Answer 1

You can do this placing custom Images with actual sharing buttons together.
Keep all the sharing button width 0 by default and make them visible on hover by increasing width.
Also add CSS transition to expend the buttons smoothly.
Consider this example.
.sharing-buttons {
float: left;
margin: 5px;
}
.share-button {
float: right;
margin-left: 5px;
overflow: hidden;
transition: all 0.6s ease 0s;
white-space: nowrap;
width: 0;
}
.sharing-buttons:hover .share-button {
width: 100px;
}
<div id="wrapper">
<div class="sharing-buttons fb">
Custom Image
<div class="share-button">Button iframe</div>
</div>
<div class="sharing-buttons tw">
Custom Image
<div class="share-button">Button iframe</div>
</div>
</div>
Edit: Final addThis code & CSS
.addthis_toolbox a.at300b, .addthis_toolbox a.at300m {
padding: 5px;
width: auto;
}
.social-container {
float: left;
margin: 5px;
width:auto;
}
.social-content {
float: right;
margin-left: 5px;
overflow: hidden;
-moz-transition: max-width .3s ease-out;
-webkit-transition: max-width .3s ease-out;
-o-transition: max-width .3s ease-out;
transition: max-width .3s ease-out;
white-space: nowrap;
max-width: 0;
}
.social-container:hover .social-content {
-moz-transition: max-width .2s ease-in;
-webkit-transition: max-width .2s ease-in;
-o-transition: max-width .2s ease-in;
transition: max-width .2s ease-in;
max-width: 95px;
}
<div class="addthis_toolbox addthis_default_style ">
<!-- FACEBOOK -->
<div class="social-container">
<img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="" />
<div class="social-content">
<a class="addthis_button_facebook_like at300b" fb:like:layout="button_count"></a>
</div>
</div>
<!-- G+ -->
<div class="social-container">
<img src="<?php bloginfo('template_directory'); ?>/images/gplus.png" alt="" />
<div class="social-content">
<a class="addthis_button_google_plusone" g:plusone:size="large"></a>
</div>
</div>
<!-- TWITTER -->
<div class="social-container">
<img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="" />
<div class="social-content">
<a class="addthis_button_tweet at300b"></a>
</div>
</div>
</div>