Hello, my friend. Welcome back to a new YouDivi quick tutorial. I’ll show you how to animate logo on hover. It’s simple and I’ll show you how to create the code using the Google Chrome Inspect Tool.

I’m using the Extra theme for WordPress, but this tutorial works for any other WordPress theme too. You just need to add the CSS code we’ll generate inside the custom CSS of your theme.

Ok, so let’s start.

Learn how to animate logo on hover

For example. Imagine that you want to animate the logo going up on hover.

Check out the video tutorial to understand better about using the Inspect to make CSS changes in your WordPress website.

Right-click logo and click Inspect

Right-click logo and click Inspect

First of all, right-click the logo. Then, click Inspect. Add a new style clicking the plus sign.

It’ll appear the img#logo selector.

You can use only the #logo. It’s already the best selector for our animation.

Add hover into the ID (#logo:hover). Then, add the property:

transform: translateY(-5px);

Now, let’s make it more subtle. Add the property:

transition: .3s all;

As you can see, it’s more smooth when hovering, but when the mouse leaves it’s too hard. So, you need to add transition: .3s all to the logo ID too (#logo).

Awesome! It should be working just like we wanted.

Now, you just need to copy this CSS and paste inside your WordPress theme custom CSS.

The final CSS to achieve the effect animation is bellow.

#logo {
transition: .3all;
}
#logo:hover {
transform: translateY(-5px);
transition: .3all;
}

Conclusion

Did you enjoy this tutorial about how to animate logo on hover?

I described a simple hover animation, but now it’s your turn to search for other animations ideas and learn more about the transform and transition properties. I recommend the w3schools documentation.

Please subscribe my YouTube channel for more tips like this. Your feedback is always welcome to me.

Leave a comment or send me an email. Thanks a lot!

See ya!