Title: Caption on mouseover – Flexslider Last modified: August 21, 2016 --- # Caption on mouseover – Flexslider * Resolved [jfor](https://wordpress.org/support/users/jfor/) * (@jfor) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/) * Meta Slider Ver. 2 is working great for me – I’m using FlexSlider as a carousel in a widget, each slide links to the corresponding design page; can be seen here: [janeforrester.com/hand-printed-fabric/fiori-reverse/](http://janeforrester.com/hand-printed-fabric/fiori-reverse/) What I would love is the caption – in my case the name of each individual design– to appear only when the slide is hovered. Have been searching the web for ways to do this without much luck. It seems like it might be something that others would be interested in implementing as well. Thanks Viewing 14 replies - 1 through 14 (of 14 total) * [matchalabs](https://wordpress.org/support/users/matchalabs/) * (@matchalabs) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687668) * Hi jfor, * Try adding this to your themes style.css file, its just the basics but should get you on your way – judging by your site it seems like you know what you’re doing 🙂 * ``` .metaslider-flex li .caption { display: none; } .metaslider-flex li:hover .caption { display: block; } ``` * Regards Tom * Thread Starter [jfor](https://wordpress.org/support/users/jfor/) * (@jfor) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687692) * Wow! Thank you for such a fast reply, works perfectly on my local test site. A little styling and should be in effect on my site. You make it look too easy. * [matchalabs](https://wordpress.org/support/users/matchalabs/) * (@matchalabs) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687696) * No worries, you’re welcome 🙂 * Regards, Tom. * PS Your carousel setup has inspired me, it should work pretty well with Post Feeds. I’ll have to set up a demo, but that’s a job for tomorrow. * [jordanche](https://wordpress.org/support/users/jordanche/) * (@jordanche) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687850) * Hi, * I tried what you proposed to make appear the caption only when the slider is hovered but unfortunately it doesn’t work. Maybe you would have an idea seeing my website : [http://www.etnavideo.com](http://www.etnavideo.com) ? * Thank you so much for this amazing slideshow. * Regards. * Jordan * [matchalabs](https://wordpress.org/support/users/matchalabs/) * (@matchalabs) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687851) * Hi jordance, * The code I put up before will only work for flexslider, for coin slider, try this: * ``` .metaslider .cs-title { display: none; } .metaslider:hover .cs-title { display: block; } ``` * Regards Tom * [jordanche](https://wordpress.org/support/users/jordanche/) * (@jordanche) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687852) * Thank you for your anwser, but it’s still not working * [matchalabs](https://wordpress.org/support/users/matchalabs/) * (@matchalabs) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687854) * Hi, please check your style.css file – change: * ``` /* .metaslider ******************************************************************************************** ``` * to * ``` /* .metaslider ********************************************************************************************/ ``` * Regards Tom. * [jordanche](https://wordpress.org/support/users/jordanche/) * (@jordanche) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687856) * Thank you so much !! I haven’t seen that !! This is totally what I wanted !! * Again, well done for your job !! * [matchalabs](https://wordpress.org/support/users/matchalabs/) * (@matchalabs) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687857) * Cool, glad its working! Please consider leaving a review if you get a few minutes spare 🙂 * Regards Tom * [rcaba002](https://wordpress.org/support/users/rcaba002/) * (@rcaba002) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687868) * Meta slider is great! I would love to have the captions appear on delay. Maybe appear from different sides of the image instead of just at the bottom of the image. Is this a difficult task to achieve? * [matchalabs](https://wordpress.org/support/users/matchalabs/) * (@matchalabs) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687869) * Hi rcaba002, * Strange that you ask, I’ve just released the live theme editor for Meta Slider Pro – that will let you position captions, or you could dive into the CSS and change the positions yourself. * This should give you a 1 second delay then fade the captions in: * ``` .metaslider-flex li .caption-wrap { opacity: 0 !important; transition: 1s opacity; transition-delay: 1s; } .metaslider-flex li:hover .caption-wrap { opacity: 1 !important; } ``` * Only tested in Chrome so give it a try in FF, IE, Safari, Opera etc before putting on a live site – you might need to add some more rules in there to get it working for those browsers. * Regards, Tom. * [rcaba002](https://wordpress.org/support/users/rcaba002/) * (@rcaba002) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687870) * Thanks so much! It’s a good starting point 🙂 There are some hover issues. * In Chrome – if you take the cursor off the image the caption won’t appear on any other slider image unless you hover again. In IE – if you’re hovering over the slider, the caption won’t appear for the next image. * Can you tell me how to keep this effect without needing to hover? I think that will solve my problem. * Keep up the good work! * [matchalabs](https://wordpress.org/support/users/matchalabs/) * (@matchalabs) * [13 years ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687871) * Hi rcaba002, * The captions will only appear when hovering with that code, so the functionality you’ve described in Chrome is as intended. For IE, thats probably just a bug that you’ll need to work out – not something I can justify doing as free support sorry (might take a couple of hours). * You’ll probably want some custom Javascript if you want to show the captions X seconds after the slide appears. Again, not simple, probably an hour or 2 of work for an experienced developer. There’s some documentation here: [http://www.metaslider.com/documentation/developers/](http://www.metaslider.com/documentation/developers/)( you’ll need the metaslider_{type}_slider_parameters filter). You’ll need hide the caption by default, then look at flexslider documentation to find which function you need to use to run some jQuery to show the caption after the slide is displayed. * Regards, Tom. * [szulyphoto](https://wordpress.org/support/users/szulyphoto/) * (@szulyphoto) * [12 years, 6 months ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687906) * Hello Tom, * Could you please publish the same code for Nivo Slider? I’ve tried to customise myself but didn’t manage. 🙁 Thanks in advance, Adam Viewing 14 replies - 1 through 14 (of 14 total) The topic ‘Caption on mouseover – Flexslider’ is closed to new replies. * ![](https://ps.w.org/ml-slider/assets/icon.svg?rev=3523572) * [Slider, Gallery, and Carousel by MetaSlider - Image Slider, Video Slider](https://wordpress.org/plugins/ml-slider/) * [Frequently Asked Questions](https://wordpress.org/plugins/ml-slider/#faq) * [Support Threads](https://wordpress.org/support/plugin/ml-slider/) * [Active Topics](https://wordpress.org/support/plugin/ml-slider/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/ml-slider/unresolved/) * [Reviews](https://wordpress.org/support/plugin/ml-slider/reviews/) ## Tags * [caption](https://wordpress.org/support/topic-tag/caption/) * [flexslider](https://wordpress.org/support/topic-tag/flexslider/) * [meta slider](https://wordpress.org/support/topic-tag/meta-slider/) * 14 replies * 5 participants * Last reply from: [szulyphoto](https://wordpress.org/support/users/szulyphoto/) * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/caption-on-mouseover-flexslider/#post-3687906) * Status: resolved