How to create an image hover effect in WordPress

Creating an image hover effect in WordPress

This simple tutorial will show you how to create a very slick image hover effect in WordPress. It is written so any user can follow, so you don’t have to be experience or know much about coding, since we will be relying on a WYSIWYG plugin called WordPress Visual Slide-Box Builder.

The good thing about this plug-in is that it is all visual. You can create a very custom hover effect using built-in transitions. In addition there are also many properties you can tweak to get your image hover effect looking just like you want it.

First lets take a look at what we are aiming to build:

As you can see above, as you hover over the image another one comes up on top of the original one.

A simple image with a hover effect that displays a sales event information. This is just a basic example but the idea is that we can place any content inside the box and add a hover effect. This makes it very easy to add image hover effects to any WordPress website.

First check out the plugin

WordPress Visual Slide-Box Builder


Download here


Step 1:

Download and install the plugin from the link above. Once installed in your WordPress site, go to settings and Virtual Slide Box Builder.

Step 2:

Click Background Image under the box section to place a background image inside the box. Find an image that fits your purpose, or if you prefer use the one from the demo:

Untitled-7

 

Important: Adjust the width and height to be exactly the same as your image

Step 2:

Add text inside the box if you wish. Might be something like Big Sales Event or what ever you want.

Step 3:

Add an image to the lit (the hover effect). Under the Lit section click Background Image and upload an image of your choice, or you may use the one from the demo. Add a hover effect from the drop-down menu (over 25 built in effects)

Untitled-4

 

Step 4:

Add text to the Lit “Order Now” or anything else you want inside the title of the Lit section.

Step 5:

Add a link to the title that will take the user to a page of your choice.

Step 6:

Give your creation a name and save it. It will appear in the bottom, cope the short-code and paste it in a page or post and your creation will appear. Done!

Profile photo of Enmanuel Corvo

Enmanuel Corvo

Software Engineer at LiveAnswer, Inc.
Enmanuel Corvo is a passioned software engineer who enjoys contributing to the web community by creating plugins, blog post and providing technical help to those who need it.
Profile photo of Enmanuel Corvo

Latest posts by Enmanuel Corvo (see all)

Posted in Uncategorized.

4 Comments

Leave a Reply