Grow your CSS skills. Land your dream job.

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

    Here

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".