WordPress.org

Ready to get started?Download WordPress

Forums

Caption hover (19 posts)

  1. vikingdad
    Member
    Posted 1 year ago #

    I am trying to get text captions to overlay the images on my home page when hover over them with the mouse.

    I am not very experienced with CSS or HTML

    Is there an easy way to do this?

    The site is caminoartanddesign.com

    Thanks

  2. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    I'm sorry but it is beyond the scope of these forums to deal with basic CSS issues. Try a dedicated CSS resource such as http://www.css-discuss.org/ instead. In the meantime, using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  3. vikingdad
    Member
    Posted 1 year ago #

    But I have seen similar things discussed on these forums many times. Why can´t I ask for help here?

  4. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Because there are better places for these non-WordPress specific questions than here.

  5. vikingdad
    Member
    Posted 1 year ago #

    But maybe there is a WordPress plugin that can help me?

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    just one way of doing this:

    /* fun with caption styles */
    .wp-caption { position:relative }
    p.wp-caption-text { display:none;}
    .wp-caption:hover p.wp-caption-text {display:block;position:absolute;bottom:-1px;left:-5px;background: #f4f4f4;width:100%; }

    as can be seen in my site.

    web search 'jquery image caption hover wordpress' might get you some leads ...
    example: http://www.net-kit.com/10-jquery-caption-plugins/# (personally untested, no recommendation)

  7. vikingdad
    Member
    Posted 1 year ago #

    Thanks, where do I insert this?

  8. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    where do I insert this?

    as with all edits/changes to styles and formatting, the general location to add this is to the end of style.css of your theme;
    or edit the existing styles if you can locate them.

    http://codex.wordpress.org/Editing_Files

  9. vikingdad
    Member
    Posted 1 year ago #

    I added it to the end of style.css but nothing happened

  10. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    the css adaption needs the wp-caption text to be displayed in a 'normal' way with your image;
    if and how this is done, depends on your theme.

    do your images have the caption field filled in?

    for instance, in your posted link, I could not see any image captions.

  11. vikingdad
    Member
    Posted 1 year ago #

    Yes I have the caption field filled in on some of the images but still nothing. Any more ideas?

  12. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    are those inmges with captions embedded in a post or page?

    does the caption show if you switch to the default theme Twenty Eleven?

    can you post a direct link to a post or page where you have those images?

  13. vikingdad
    Member
    Posted 1 year ago #

    No they are not embedded in a post, this is the problem, they are in the ´featured image´ thumbnails on the home page.

    With the embedded image I can add a shortcut to the html to overlay text using a plugin, but in the ´featured image´ which show on the home page I don´t know how to do it.

    Thanks

  14. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    to show the image captions with the featured images, try to add this code to functions.php of your theme:

    http://pastebin.com/x9YDhnjA

    useful css for this - adapt to your needs:

    .wp-caption.thumb-caption { padding:0;border:none; position:relative; }
    .wp-caption.thumb-caption img { margin: 0; }
    .wp-caption.thumb-caption .wp-caption-text { position:absolute; bottom:10px; background: #111; color: #fff; font-weight: bold; text-align: left; display:block; padding:3px 3%; width:94%;}
    .wp-caption.thumb-caption .wp-caption-text { visibility: hidden; }
    .wp-caption.thumb-caption:hover .wp-caption-text { visibility: visible; }
  15. vikingdad
    Member
    Posted 1 year ago #

    Just copy and paste all that code right at the end of the functions.php? Then do the same at the end of the stylesheet?

  16. vikingdad
    Member
    Posted 1 year ago #

    Hey that has worked great. Thanks so much alchymyth, I have been trying to do that for so long.

    Only one strange thing has happened. On my computer it works fine but when I look at the site on another computer the stylesheet change hasn´t worked and the caption is displayed below the image. Do you have any idea why that would be?

    Thanks again

  17. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    when I look at the site on another computer the stylesheet change hasn´t worked

    the old styles are possibly still stuck in the browser cache (?)

    the exact way of clearing the browser cache might depend on your browser, but try 'CTRL F5' for istance...

  18. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    just saw an issue in IE7; the caption was off to the right of the image.

    add left: 0; to this line in style.css - shown below:

    .wp-caption.thumb-caption .wp-caption-text { position:absolute; bottom:10px; left: 0; background: #111; color: #fff; font-weight: bold; text-align: left; display:block; padding:3px 3%; width:94%;}
  19. vikingdad
    Member
    Posted 1 year ago #

    Cleared the cache and it works now.

    I changed it to left: 0.

    Hopefully that works, it does when I look at it in IE.

    Thanks again alchymyth. Really helpful :)

Topic Closed

This topic has been closed to new replies.

About this Topic