Hover over an image on wordpress blog and show share buttons aside the image

[Hatul]

Hi guys,

I am working on a wordpress blog.
I have seen a lot of blogs that have the option that when you hover over an image, you get a log side of it, or even inside of it, a new share buttons that share the post.

How can I do this without using an external plugin?

[Paulie_D]

There are multiple ways this could be done.

One of the simplest method is to have an absolutely positioned element (probably a div) set next to (or over the image) that is normally hidden and only shown when you hover over the image.

Usually this will require the image (and hidden div) to be wrapped in a single element.

[Hatul]

That’s what I was thinking about.
The problem is how to create this div whenever I have an image uploaded to the post?
Because curently, when you upload an image to a post, you just upload an image to a post..

[Paulie_D]

That would be part of your page template I imagine.

This would require some PHP /JS skills I imagine.

[Hatul]

That’s my main problem in the whole thing :(

[Paulie_D]

Well, unfortunately, this isn’t really the place to learn how to do that.

I think you might need to invest some time into a little more research…or find a plug-in..which would seem to be the best option.

[Hatul]

Do you know where I can find a good example for the CSS hover display/hidden part?

[Paulie_D]

Here

http://codepen.io/Paulie-D/pen/ziFep

[Author]

Posts