Community Forums › Forums › Archived Forums › Design Tips and Tricks › Images to show caption text only on hover
Tagged: image hover caption
- This topic has 7 replies, 6 voices, and was last updated 8 years, 7 months ago by paaljoachim.
-
AuthorPosts
-
August 26, 2014 at 3:32 am #121080August 26, 2014 at 12:52 pm #121174zohdyMember
Bump... no one?
August 26, 2014 at 4:22 pm #121215eamonmoriartyParticipantHave you tried this?
http://www.itsabhik.com/display-image-captions-only-on-hover/
Eamon Moriarty
EM DzineAugust 27, 2014 at 7:16 pm #121452zohdyMemberI just did. With no luck however 🙁
But thanks anyways..
August 28, 2014 at 1:58 am #121474WisdmLabsMemberHi zohdy,
Try out the below HTML and CSS code:HTML:
<div class="wrap"> <a href="#" class="image"> <img src="http://yourvisionquest.com/wp/wp-content/uploads/2014/04/VQ039-90x90.jpg" alt="Image"/> <span class="text">Text Here</span> </a> </div>
CSS:
.wrap { width: 90px; text-align: center; background: #eee; padding: 15px; } .image { text-decoration: none; color: #000; } .text { visibility: hidden; } .image:hover > .text { visibility: visible; }
August 28, 2014 at 2:40 am #121476Brad DaltonParticipantTested this and it works in StudioPress themes http://wpsites.net/web-design/display-caption-text-on-image-hover-in-wordpress/
November 18, 2014 at 4:03 pm #132043mountashMemberDoes this still work with the latest versions of WP and Genesis?
Janet
Janet Morrow | Mountain Ash Website Design | http://www.mountainash.org
Visit Our Site for more information and pricing.August 10, 2015 at 1:32 pm #161966paaljoachimMemberRegarding the link to itsabhik web site article on display image captions only on hover.
This is working for me:
The CSS:
.wp-caption { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #F0F0F0; display: block; max-width: 96%; padding: 3px; position: relative; text-align: center; } .wp-caption-text { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); bottom: 8px; color: #FFFFFF; display: block; filter: alpha(opacity=0); font-family: "Open Sans",sans-serif; font-size: 13px; left: 8px; margin: 0; max-width: 100%; opacity: 0; padding: 5px 10px !important; position: absolute; right: 8px; } /* Changed from article to */ .wp-caption:hover .wp-caption-text { filter: alpha(opacity=100); opacity: 1; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; }
I plan on creating an article on my web site. I'll add a link here when it is finished.
I design, instruct, help people to understand WordPress through my tutorials as well as create web sites and hold classes where i teach WordPress and Adobe software. easywebdesigntutorials.com
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.