[oik] plugins.com

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: December 1, 2020

Information

Component:
  • oik-nivo-slider – jQuery nivo slider
Letters: S

Recent plugin updates

oik-css v2.1.0 Update to oik-css v2.1.0 for the ability to style CSS and GeSHi output in documentation. ...
oik-types v2.3.0 Update to oik-types v2.3.0 for improved control over sort order on archives ...
UK-tides v3.1.0 UK-tides v3.1.0 now supports several additional ports. It's built with latest wp-scripts and shared libraries and tested with WordPress 6.1. ...
oik v4.8.2 Upgrade to oik v4.8.2 if you installed oik v4.8.1 from wordpress.org and found that the blocks were missing from the editor. ...
sb-chart-block v1.1.0 sb-chart-block v1.1.0 now uses chart.js v3.9.1. Tested with WordPress 6.0.1 and Gutenberg 13.8.2 ...

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.com
© Copyright oik-plugins 2011-2023. All rights reserved.


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