Title: Caption hover Last modified: August 20, 2016 --- # Caption hover * [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 12 months ago](https://wordpress.org/support/topic/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) 1 [2](https://wordpress.org/support/topic/caption-hover/page/2/?output_format=md) [→](https://wordpress.org/support/topic/caption-hover/page/2/?output_format=md) * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812290) * 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/](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/](http://getfirebug.com/) * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812291) * But I have seen similar things discussed on these forums many times. Why can´ t I ask for help here? * [esmi](https://wordpress.org/support/users/esmi/) * (@esmi) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812296) * Because there are better places for these non-WordPress specific questions than here. * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812297) * But maybe there is a WordPress plugin that can help me? * [Michael](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812301) * 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](http://www.transformationpowertools.com/wordpress/page-template-sidebar-overwrite-theme-options-twenty-eleven). * web search ‘jquery image caption hover wordpress’ might get you some leads … example: [http://www.net-kit.com/10-jquery-caption-plugins/#](http://www.net-kit.com/10-jquery-caption-plugins/#)( personally untested, no recommendation) * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812303) * Thanks, where do I insert this? * [Michael](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812305) * > 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](http://codex.wordpress.org/Editing_Files) * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812307) * I added it to the end of style.css but nothing happened * [Michael](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [13 years, 12 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812416) * 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. * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 11 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812684) * Yes I have the caption field filled in on some of the images but still nothing. Any more ideas? * [Michael](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [13 years, 11 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812685) * 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? * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 11 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812686) * 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](https://wordpress.org/support/users/alchymyth/) * (@alchymyth) * [13 years, 11 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812688) * to show the image captions with the featured images, try to add this code to functions.php of your theme: * [http://pastebin.com/x9YDhnjA](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; } ``` * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 11 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812689) * 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? * Thread Starter [vikingdad](https://wordpress.org/support/users/vikingdad/) * (@vikingdad) * [13 years, 11 months ago](https://wordpress.org/support/topic/caption-hover/#post-2812690) * 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) 1 [2](https://wordpress.org/support/topic/caption-hover/page/2/?output_format=md) [→](https://wordpress.org/support/topic/caption-hover/page/2/?output_format=md) The topic ‘Caption hover’ is closed to new replies. ## Tags * [caption](https://wordpress.org/support/topic-tag/caption/) * [hover](https://wordpress.org/support/topic-tag/hover/) * [image](https://wordpress.org/support/topic-tag/image/) * 18 replies * 3 participants * Last reply from: [vikingdad](https://wordpress.org/support/users/vikingdad/) * Last activity: [13 years, 11 months ago](https://wordpress.org/support/topic/caption-hover/page/2/#post-2812694) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics