[oik] plugins.co.uk

WordPress plugins and themes

  • Home
  • About
    • lazy shortcodes
    • smart shortcodes
    • oik base plugin
      • oik – donate
      • oik PayPal buttons
      • oik installation
      • oik Button Shortcode button
      • oik changelog
      • oik FAQ
      • oik plugins on SVN
      • oik plugins on GitHub
  • Plugins
    • oik base plugin
    • FREE oik plugins
    • WordPress plugins
    • Premium oik plugins
    • Bespoke oik plugins
  • Shortcodes
    • Shortcode examples
  • Blocks
    • Block examples
  • APIs
    • ALL action and filter hooks
  • Blog
You are here: Home / oik-nivo-slider – [nivo] shortcode for the Nivo slider / oik-nivo-slider FAQ / Styling the oik-nivo-slider caption

Styling the oik-nivo-slider caption

If you want the caption for each slide to only appear when the mouse is hovered over the slide then you can use custom CSS.
Art_suppliesCubePencil
Art_suppliesCubePencil
Hover over the caption to make it appear.
Here are two slideshows. The second one has a class name of imagegal.  The CSS to override the jQuery code is
.imagegal .nivo-caption {opacity: 0.0 !important; -webkit-transition: opacity 2s;
transition: opacity 2s; }
.imagegal .nivo-caption:hover {opacity: 1.0 !important; }
The !important is necessary since it has to override the jQuery that is animating the caption as the slides change.

Related

[nivo] [bw_css]
Component:
  • oik-nivo-slider – jQuery nivo slider
Letters: S

hover to slideToggle source

If you want the caption for each slide to only appear when the mouse is hovered over the slide then you can use custom CSS. <!--more-->[div class=w20pc][nivo class=w90pc caption=y link=n ][ediv][div class=w20pc][nivo class="w90pc imagegal" caption=y link=n] Hover over the caption to make it appear. [ediv][div class=w60pc]Here are two slideshows. The second one has a class name of imagegal.  The CSS to override the jQuery code is[bw_css .].imagegal .nivo-caption {opacity: 0.0 !important; -webkit-transition: opacity 2s;transition: opacity 2s; }.imagegal .nivo-caption:hover {opacity: 1.0 !important; }[/bw_css]The <strong>!important</strong> is necessary since it has to override the jQuery that is animating the caption as the slides change.[ediv][clear]<h3>Related</h3>[bw_code nivo][bw_code bw_css][bw_fields]<hr />[bw_wtf][bw_tree post_parent=.]

  • oik custom image link URL
  • Displaying a news slider
  • Controlling the height of the nivo slider
  • Centering the slider with a wider caption
  • oik-nivo-slider with links opening in new window
  • What is the simplest syntax for the [nivo] shortcode?
  • nivo slider is wider than my images
  • oik-nivo-slider thumbnail parameter
    • oik-nivo-slider – displaying images attached to a different post
    • images attached to related pages
      • child page 1 for nivo thumbnail parameter example
      • child page 2 for nivo thumbnail parameter example
  • nivo slider showing some images, bw_images the others

Published: August 7, 2012 | Last updated: February 10, 2015

Plugins

  • All Plugins
  • oik base plugin
  • FREE oik plugins
  • WordPress plugins
  • Premium oik plugins

Themes

  • FREE themes
  • Bespoke themes
  • Premium themes

Blocks

  • All Blocks
  • Block examples
  • About Blocks

Shortcodes

  • All Shortcodes
  • Shortcode examples
  • About Shortcodes

Reference

  • About APIs
  • All APIs
  • All Classes
  • All Files
  • All Hooks

Support

  • Contact
  • Cookies policy
  • Get API key
  • Privacy
  • Request support
  • Sitemap
  • Stay informed
  • Terms and Conditions
oik-plugins
Email: oikplug@oik-plugins.com

Weight shipping plugins

Find out which cart weight shipping plugin you need for your WooCommerce site.
Which cart weight based plugin do I need?

Site:  www.oik-plugins.co.uk
© Copyright oik-plugins 2011-2022. All rights reserved.


Website designed and developed by Herb Miller of Bobbing Wide
Proudly powered by WordPress and oik-plugins
WordPress 5.9.2. PHP: 7.4.30. Memory limit: 768M