Caption on mouseover – Flexslider

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

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.

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.

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 : https://www.etnavideo.com ?

Thank you so much for this amazing slideshow.

Regards.

Jordan

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

Thank you for your anwser, but it’s still not working

Hi, please check your style.css file – change:

/* .metaslider
********************************************************************************************

to

/* .metaslider
********************************************************************************************/

Regards
Tom.

Thank you so much !! I haven’t seen that !!
This is totally what I wanted !!

Again, well done for your job !!

Cool, glad its working! Please consider leaving a review if you get a few minutes spare ??

Regards
Tom

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?

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.

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!

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: https://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.

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