How to Create Logo Swap on Hover - WpBuilt 1350476922971685223

How to Create Logo Swap on Hover

In this tutorial, we’ll do doing this type of hover effect:

Logo Swap Tutorial5

Step 1: First create a section where you will place the widget.

How to Create Icon Only Buttons5

Step 2: Add your desired column. In this case I will choose a two-column structure.

Overlap_Images_in_Elementor4

Step 3: Drag an image widget on the column.

Logo Swap Tutorial1

Step 4: To do the trick in this tutorial, we need two images. The images below are what I used in this tutorial.

Step 5: On the Custom CSS tab of the image widget paste this CSS snippet.

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

And now, we’re done!

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

This Post Has One Comment

  1. Thank you very much for this article. I have already tried the system and it works. I really like this.

Leave a Reply

wp-cta.png

Get your FREE Web
Design Brief Template

Get your FREE Web
Design Brief Template

×

Cart