The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # August 20, 2014 at 2:53 am

    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?

    # August 20, 2014 at 3:31 am

    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.

    # August 20, 2014 at 3:37 am

    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..

    # August 20, 2014 at 3:46 am

    That would be part of your page template I imagine.

    This would require some PHP /JS skills I imagine.

    # August 20, 2014 at 3:48 am

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

    # August 20, 2014 at 4:05 am

    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.

    # August 20, 2014 at 4:10 am

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

    # August 20, 2014 at 4:25 am


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed