Transform Your Images: Master Text Sliding on Hover in Elementor

by | May 28, 2024 | Divi Theme, Web Design, Wordpress

In this session, we'll be focusing on creating a text slide-in effect from the left-hand side when you hover over an image.

Transform Your Images: Master Text Sliding on Hover in Elementor

Hey everyone, welcome to another Elementor tutorial! This is Jamie from System22 and WebDesignDetectives.com. Today, we’re continuing from our previous tutorials where we demonstrated text dropdown and fade-in effects. In this session, we’ll be focusing on creating a text slide-in effect from the left-hand side when you hover over an image. This is a fantastic effect to enhance the interactivity and visual appeal of your website. Let’s dive right in!

First, ensure you have your page open in Elementor. For this tutorial, I have a section at the top with three columns. In the third column, we’ll be adding a text editor module. If you’ve been following along with my previous tutorials, you’ll know that the initial image resides within the column itself.

Click on the little matrix icon in Elementor’s sidebar and drag a text editor module into the third column of your section. This module will hold the text that will slide in when a user hovers over the image.

Click on the gray icon at the top of the column to open its settings. Navigate to the “Style” tab, click on the paintbrush icon next to “Background,” and choose your desired image and upload it. This image will be the background for the text that slides in.

Set the “Background Type” to “Classic.” Ensure the “Size” is set to “Cover” to make sure the image fills the column. Adjust the “Position” to “Center Center” to ensure the image is well-aligned and properly centered.

Click on the text editor module to open its settings. Go to the “Style” tab and change the text color to white for better visibility. By making the text white, it stands out against the background image, making it easier to read.

Navigate to the “Advanced” tab in the text editor settings and add padding of 60 pixels around the text to center it nicely within the column. This padding ensures the text doesn’t touch the edges of the column, giving it a clean and professional look.

We’ll need to write some custom CSS to achieve the slide-in effect. For this, I’ll be using Elementor Pro, but you can also use the Additional CSS panel in your WordPress dashboard if you’re using the free version. Go to the “Advanced” tab of the text editor module and scroll down to the “Custom CSS” section.

Assign a class name to the module. For this tutorial, we’ll use `.tx-slide`. Add the following CSS:
“`css
.tx-slide {
margin-left: -100%;
width: 200%;
padding-right: 100%;
transition: all 700ms ease;
}
.tx-slide:hover {
margin-left: 0;
width: 100%;
padding-right: 0;
}
“`
This code moves the text to the left by setting the `margin-left` property to `-100%`. It also sets the width to `200%` and adds padding on the right to ensure the text can slide back in. The `transition` property makes the slide-in effect smooth, with a duration of 700 milliseconds.

Copy the class name `tx-slide` (without the dot). Go to the “Advanced” tab, find the “CSS ID & Classes” section, and paste `tx-slide` into the “CSS Classes” field.

In the custom CSS panel, we already added the transition property:
“`css
transition: all 700ms ease;
“`
This ensures that the text slides in smoothly rather than just jumping to its final position.

Go to the column settings and open the “Style” tab. Scroll down to “Background Overlay.” Set an overlay color (e.g., black) and adjust the opacity to make the text more readable when hovered. By adding a dark overlay on hover, we ensure that the white text remains readable against any background image.

In the column settings, go to the “Advanced” tab and open the “Custom CSS” section. Add the following CSS:
“`css
.col-fl {
overflow: hidden;
}
“`
Apply the class name `col-fl` to the column: Copy the class name `col-fl` (without the dot). Go to the “Advanced” tab of the column settings. Find the “CSS ID & Classes” section and paste `col-fl` into the “CSS Classes” field. By hiding the overflow, we ensure that the text doesn’t spill out of the column, maintaining a clean and professional look.

Save and update your changes in Elementor. Preview the page and test the hover effect to ensure it works smoothly on both desktop and mobile devices.

Hover over the image to see the text slide in from the left. Ensure the transition is smooth and the text is readable. Use Elementor’s responsive mode to preview the page on different devices. Test the hover effect on tablets and smartphones to ensure it works as expected.

There you have it! We’ve successfully created a text slide-in effect on image hover using Elementor. This effect not only adds a professional touch to your website but also enhances user interaction.

In the last three tutorials, we’ve covered text dropdown, fade-in, and slide-in effects. These simple yet effective animations can significantly elevate the user experience on your site. Feel free to customize the CSS code provided to match your design needs.

If you have any questions or run into any issues, drop them in the comments below, and I’ll be happy to help. Thanks for watching, and happy designing! Don’t forget to like, subscribe, and hit the bell icon for more tips and tutorials from System22 and WebDesignDetectives.com.

Have a great day!

Try out the Divi theme:

Divi Supreme Modules Pro Plugin 10% Off:

Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6

Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists

Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1

 

Why Divi?

Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.

The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.

The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.

The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.

The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.

The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.

Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.

Free Stock Photos

Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.

There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.

Free Stock Photos – Where to get an unlimited supply

Free Stock Photos – Where to get an unlimited supply

Have a great website design

It is essential to have a great website design nowadays as so many people tend to shop and find services online. It is also very important to have a responsive website design as almost 50% of today’s browsing is done on smartphones and tablets, I certainly use mine for browsing. If a customer navigates to your site and they have to pinch and zoom to be able to read and navigate, the chances are that they will move away to another site and you will almost certainly lose that customer.

A well-developed website can convey trust and credibility, making people to buy from you, or support you. Whether you are a professional looking for a job, or an expert in your industry: you can show that to the whole world by having a custom responsive website.

Be sure to check out our playlist page to find the help you need!

Latest YouTube Videos

Subscribe To Our YouTube Channel

4.5 million views on youtube




Test Out The Divi Theme

IT Certification Category (English)300x250

Elementor Page Builder




Pin It on Pinterest

Share This