[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 v4.9.2 Upgrade to oik v4.9.2 for support for PHP 8.1 and PHP 8.2. ...
oik-block v0.3.0 oik-block v0.3.0 no longer displays the Editor selection meta box ...
oik-blocks v1.4.3 Upgrade to oik-blocks v1.4.3 for PHP 8.2 support. ...
cookie-cat v1.4.6 Upgrade to cookie-cat v1.4.6 for PHP 8.1 & PHP 8.2 support. ...
oik-fields v1.54.0 oik-fields v1.54.0 caters for the deprecation of get_page_by_title() in WordPress 6.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.3.1. PHP: 7.4.33. Memory limit: 768M