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 and install the plugin from the link above. Once installed in your WordPress site, go to settings and Virtual Slide Box Builder.
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:
Important: Adjust the width and height to be exactly the same as your image
Add text inside the box if you wish. Might be something like Big Sales Event or what ever you want.
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)
Add text to the Lit “Order Now” or anything else you want inside the title of the Lit section.
Add a link to the title that will take the user to a page of your choice.
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!