Social sharing box "opening" effect?

[satrap]

Hi everyone,

I recently came across a very cool social sharing button that when you hover on it, it opens up the box, revealing the the total count of the shares.

Its part of a plugin called “Social Locker”.

You can see an example of it on this page: http://demo.byonepress.com/social-locker-for-wordpress/

I don’t really need the plugin, but would love to be able to recreate the effects of the buttons with my own social sharing icons.

I know some basic CSS but not enough to figure this out. Does anyone know how this can be done?…

Any help would be appreciated.

[nixnerd]

3d transforms my man. They’re pretty easy… but they don’t have great support. So… I think you’re opening up a can of worms for next to no benefit.

Before you add any social buttons of any kind, I think you should read this:

http://solomon.io/why-im-done-with-social-media-buttons/

This is one of many articles I’ve found on the topic. I think if your site is Mashable or Tech Crunch or The Verge… sure, social buttons are great. For the average blogger, ESPECIALLY the tech blogger, they serve next to no purpose. Well, except free advertising for these social data mapping companies.

[satrap]

@NIX

I actually agree with you about social sharing buttons being almost useless for average blogs. I normally don’t even use them since all they do is slow down your load time, unless you hard code the thing yourself.

But, this is beside the point I was making. I am slowly learning CSS and really liked how those buttons do that. So I wanted to learn it.

Is there any blog post, eBook or a guide or something that I can use to learn more about 3d transforms and how it works?…

Thanks for taking time to reply.

[shaneisme]

David Walsh has a good one by guest blogger Ana Tudor (check out her CodePen profile too): http://davidwalsh.name/3d-transforms

[satrap]

@shaneisme
Thanks very much.

[Author]

Posts