How to Create Logo Swap on Hover with Elementor

Looking for a way to create a logo swap on hover using the Elementor page builder on your website? Using the logo swap feature on your website you can easily make a difference from others. Here in this article, we will guide you to the easiest way to create a logo swap on hover using the Elementor page builder.

The Elementor page builder does not prove any specific widget to swap your logo. You need to add a little bit of custom CSS code for this purpose. The custom CSS feature is only available on Elementor Pro. So make sure that you have upgraded to Elementor Pro.

Create Logo Swap on Hover with Elementor

After activating the Elementor Pro, open up a page with the Elementor editor where you want to add the logo swap. Now click on the “+” icon to create a section.

Now you need to select the column for your section. Here we are using the two-column section.

After creating the section you need to add the image widget to the section. Drag the image widget and drop it into your created section.

After adding the image widget, select or upload the image to display on the page.

After adding the image you can set the image size, caption, alignment, and link. Now to swap the image on hover you need to upload another image on your website to display on hover. After uploading the image you need to copy the image URL. You will find the image URL from the media file. Go to the media file and select the image, now in the right dashboard you will be able to see the image URL. Copy the image URL.

Now move on to the advance tab and then add the following CSS code on the Custom CSS field.

selector img:hover{
content: url('https://niamrox.com/test/wp-content/uploads/2022/03/Group-165.png');
opacity: .50;
transition-duration: 3s;
}

Here you need to replace the image URL with the hover image you want to use. This will set your selected image as the hover.  From the Style tab, you can style up your display image. There are different style options available.

You can set the image width, height, and maximum width. Then you can set the opacity, CSS filters, border type, border-radius, and box-shadow for normal conditions.

 

For hover conditions, you can set the hover animation and transition too. That’s it! Your logo swap is ready to use. Publish the page and preview the logo swap feature.

Wrapping Up

Following the process, you will be able to create a logo swap on your website using the Elementor page builder. You can see our other articles to learn How to Use The Table of Content Widget of Elementor

How to add a hover effect to a column in Elementor

How to save, import & export templates in Elementor