How to Create a WordPress Slider With Text Over Image Hover Effect

by Waseem Abbas on October 2, 2017 | Reader Disclosure

Do you want to display a caption on image hover in your WordPress slider? Sometimes you need to show the full image slider and allow the text to appear on mouseover. In this tutorial, we will share how to create a WordPress slider with text over image hover effect.

Creating a WordPress slider with captions helps your users to understand the image slides. In WordPress, you need to use a plugin like Soliloquy to make this possible. It is a feature rich plugin and let you create the sliders you need.

To create a WordPress slider with text over image hover effect, you’ll need to follow these 5 steps:

Step 1. Install and activate Soliloquy slider plugin
Step 2. Create a new image slider in WordPress
Step 3. Edit the image slides and add your caption
Step 4. Add the CSS code in your theme’s stylesheet
Step 5. Display the slider on your WordPress site

By the end of this tutorial, you’ll be able to show caption on image hover that will look like as shown in this image below:

Ready to get started? Let’s go!

Step 1: Install and Activate Soliloquy Slider Plugin

Since you may know that there is no option in WordPress to create the image sliders, so the first thing you need to do is to install and activate Soliloquy plugin. This plugin will allow you to add sliders in WordPress.

Having issues in the installation? Check out this guide on how to install and activate Soliloquy.

Step 2: Create a New Image Slider in WordPress

Upon activating the slider plugin, you should go to Soliloquy » Add New to create a new image slider in WordPress. Simply add a title and drop your images in the Native Slider section.

For the other basic settings, you should check out this guide on how to create an image slider in WordPress.

Step 3: Edit the Image Slides and Add Your Caption

Next you need to scroll down to Slider tab and edit your images (click on the pencil icon to edit).

It will show you a popup where you can add the caption.

Go ahead and repeat this on all the images. Hit the Publish button after adding the caption in your slider. To learn more, you should check this guide on how to add an image slider with captions in WordPress.

Step 4: Add the CSS Code in Your Theme’s Stylesheet

Now you’ll need to add CSS code to your WordPress theme. The easiest way to do that is to go to Themes » Customize.

Then click on Additional CSS.

Copy and paste the following code:

[php]

.soliloquy-item:hover .soliloquy-caption-inside {
opacity: 1;
}
.soliloquy-item .soliloquy-caption-inside {
opacity: 0;
}

[/php]

Then click Save & Publish.

Step 5: Display the Slider on Your WordPress Site

To display the slider in WordPress, simply edit your image slider and copy the shortcode from Soliloquy Slider Code widget.

You should go to Pages/Posts » Add New or edit an existing page/post. In the visual editor, simply paste the shortcode.

Click on the Update button. You can go to your site to see the slider with text over image hover that will look like as shown in this image below:

That’s all. We hope this tutorial has helped you to learn how to create a WordPress slider with text over image hover effect. You may also want to check out our guide on how to change the WordPress slider image size in Soliloquy. In case, you want your image slides to rank in the search engines, you should check this ultimage WordPress SEO guide for beginners.

If you like this tutorial, then please follow us on Facebook and Twitter for more free WordPress guides and resources.