To set an initial height of 515px and expand to full height on mouse hover for a Smart Slider 3 slider, you can use custom CSS

To set an initial height of 515px and expand to full height on mouse hover for a Smart Slider 3 slider, you can use custom CSS. Here’s how you can achieve this:

Step 1: Identify the Slider’s CSS Class or ID

First, identify the CSS class or ID of the Smart Slider. You can do this by inspecting the slider element on your web page using your browser’s developer tools.

Step 2: Add Custom CSS

Once you have identified the CSS class or ID of the slider, you can add custom CSS to achieve the desired effect.

  1. Go to WordPress Customizer:
    • Navigate to Appearance > Customize.
  2. Open Additional CSS:
    • In the Customizer, go to Additional CSS.
  3. Add the Following CSS:
/* Initial height */ #smart-slider-class-or-id { height: 515px; overflow: hidden; transition: height 0.5s ease-in-out; } /* Expanded height on hover */ #smart-slider-class-or-id:hover { height: auto; /* This sets the height to expand to the full content height */ } /* Optional: Ensure the slider’s parent container adjusts height accordingly */ #smart-slider-class-or-id .n2-ss-slider { height: 100%; /* Adjust the internal slider container to take full height */ }

Leave a Comment

Your email address will not be published. Required fields are marked *