How to create an image hover-preview effect

To create an image hover-preview effect, first we need an HTML file.

The original image “hoverpreview” is set to be 720 pixels by 480 pixels, and the image “hover” is the resized thumbnail. Now we can define the effect we want in a CSS file.

I set the thumbnail to be 200 pixels wide and with a height of 200 pixels. Of course you can change it into any size you want. The “display: none; ” sentence means not to display the preview image without mouse hovering over the thumbnail, otherwise there will be two pictures simultaneously on the screen no matter hovering on or off.

We then need to define the preview effect when hovering over the thumbnail. The position of the preview image is relative to the thumbnail. It’s a little bit strange that the code “top: 150px; left 150px; ” actually means the thumbnail is on the top-left of the preview image, and if you want it the other way around, the pixels should be in negative numbers. You can also define the size of the preview image. Make sure it is proportional to your original picture, because an out-of-shape image is not usually what you want.

The picture below shows what the effect looks like:

I found this little trick useful when I was designing my picture page. I do hope it will help you as well. Thank you for reading my blog post.

Yang Chen

~ by yangchen29 on September 30, 2012.

%d bloggers like this: