Support » Themes and Templates » Caption hover

  • vikingdad

    (@vikingdad)


    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/

    vikingdad

    (@vikingdad)

    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.

    vikingdad

    (@vikingdad)

    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)

    vikingdad

    (@vikingdad)

    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

    vikingdad

    (@vikingdad)

    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.

    vikingdad

    (@vikingdad)

    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?

    vikingdad

    (@vikingdad)

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

    (@vikingdad)

    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?

    vikingdad

    (@vikingdad)

    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.