Support » Themes and Templates » Caption hover

  • 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

Viewing 15 replies - 1 through 15 (of 18 total)
  • esmi

    (@esmi)

    Forum Moderator

    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/

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

    esmi

    (@esmi)

    Forum Moderator

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

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

    Michael

    (@alchymyth)

    Forum Moderator

    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)

    Thanks, where do I insert this?

    Michael

    (@alchymyth)

    Forum Moderator

    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

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

    Michael

    (@alchymyth)

    Forum Moderator

    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.

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

    Michael

    (@alchymyth)

    Forum Moderator

    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?

    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

    Michael

    (@alchymyth)

    Forum Moderator

    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; }

    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?

    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

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Caption hover’ is closed to new replies.