Image Hover Effect and image sizing (free version)

Hey all,

Just wanted to share something I learned that others may not have yet about Image Hover effect. The free version does not let you size your hover effects, which as far as I can tell means that the hover effect will resize to fit the width of your page, enlarging your image at the same time, till the edges of your page are filled, with the height only adjust to match the width and maintaining the correct aspect ration.

If you don’t want your image enlarged (and don’t want to buy the premium version) then you can use an image editor to add in whitespace (or whatever color matches your site) to the left and right of your image. If you want your image in the center of the page, add equal amounts of ‘image’ to the left and right of your main image.

On my site I’ve had success making sure the total width of my image is about 850 pixels wide. You may need to increase or decrease the width for your site. The result is a very wide hover effect box, but at least the main image I’m trying to give the effect to isn’t super tall/large and pixelated due to the force expansion. I can live with the wide hover effect.

In some cases I used this to my advantage by adding several sections (images) to my hover effect, knowing it’d create a sort of row of images, each part of a single hover effect but capable of having unique effects for each image, and filling the width of the page. You may have to play around with what size images work best to fill the page and get you the image sizes you want.

Hopefully this helps someone using the free version of Hover Effect plugin like me.

site I mostly use this method on is tensisters.com. I use 3 different hover effect methods there, 1 large image, 1 small image but with whitespace filling to the left and right so the image itself stays smaller, and 1 row of 3 images using hover effect.

Have a lovely day!