How many times you have visited a site and when you hover your mouse on logo or any image, it changes. This is call image hover effect. In this tutorial, I will be sharing how to add such logo hover effect, or how to add CSS hover effect in WordPress blog. Using this Image hover effect guide, you will be able to add hover effect anywhere on your WordPress blog.
I’m sure many people, especially webmasters and web designers are aware about CSS Sprites. In this article, I’ll be explaining about the basic image hover effect using CSS Sprites for newbies while the same effect can be extended to achieve the CSS pin balloons effect. So, what are CSS Sprites? Why should I use them?
A Sprite is basically a huge collection of small images on a blog. It’s the widely used technique that’s adopted by major sites like Yahoo!, Google, Facebook to reduce the loading time for their site. Why should we adopt CSS Sprites? Simple! You save the number of HTTP requests made to obtain each individual image. It’s browser compatible and generally, the size of the Sprite image is comparatively less when compared to the size of all the individual images – you save a considerable bandwidth. Also you can take help of our Optimize CSS file tutorial to learn about CSS file optimization.
Getting started with Image Hover effect :
You’ll need Adobe PhotoShop or any photo editing software to proceed with this tutorial. If you don’t possess one, I strongly suggest you to buy one. Well, I’ll explain this tutorial using PhotoShop. Where can I apply these effects? Basically, anywhere you need a hover effect. Few ideas where you can use this – header image on your blog, creating pin balloons effect, cross-browser compatible “Read More” buttons, subscription boxes, navigation bars and so on… I’ll post about a more practical example – “Subscription Box” in my next tutorial. Let’s just learn the basics here!!!
Initially, let’s create the basic image that should appear on the blog without hovering. In my example, I have used a simple cartoon with a dialog box which says “Welcome to Shoutmeloud” as shown below. Save the image as “Image-1.png”.
Note the height and width of the image. In my case, it’s 200px(width) x 100px (height). Now, you need to modify your image using PhotoShop. I intend to change the text from “Welcome to Shoutmeloud” to “Hope you enjoy this article…” for the hover effect. So, I use photoshop to clean up the text area inside the dialog box and rewrite it with the alternate text. The image after modification is shown below. Save this image as “Image-2.png”
Extended CSS Pin Balloon Effect
If you observe the image closely, you’ll notice that the dialog box appears to be a little bigger than the initial image. However, the end point of the dialog box appears to be fixed. So, this effect is referred to as “CSS Pin Balloon Effect”. There are different methods to achieve this. We’ll just extend the dialog box with our image editing software to realize the final effect.
Well, we now have two images – “Image-1.png” and “Image-2.png”. I recommend you to smush the images before you save them. Visit the following link – Yahoo! Smush.it, it will reduce the image size without compromising the quality of image. Now, it’s time to place one image below another.
Finalizing Image Hover effect using CSS:
Open a “New File” in photoshop of the following dimensions – double the height of the image and same width as “Image-1.png”. In my case, it’ll be 200px x 200px. Now, just cut and paste “Image-1.png” and “Image-2.png” one below the other. So, your final image should look similar to the one shown below. Save this image as “Final-image.png” and upload the same to your website.
Well, the designing stuff is over! Now, we’ll move on to the HTML part. To realize this effect on your blog/website, you just need to declare anchor tag with unique id name. I have used the following code to illustrate this example.
<a href=”http://www.shoutmeloud.com/” id=”css-tuts”></a>
Next, we’ll define the CSS for the id “css-tuts”. Just specify the following CSS code in the head section of your blog.
Just note the width and height of the image that’s defined in the CSS part. Those are not the dimensions of “Final-Image.png” rather, it’s the dimension of “Image-1.png”! Since we already took note of the image dimensions, we’ll not be having any issues now. Look at the background-positioning of the image.
The initial position is 0px 0px – points to the start of the image. To realize the hover effect, we need to move the vertical positioning since we placed the images one below the other. Horizontal position has to be changed if the images are placed one besides another. In my example, I’ll move the positioning from 0px to -100px vertically while the horizontal position remains the same. You’ll need to specify a negative sign for positioning – it’s a kind of syntax rule for CSS sprites!!!
Hover your mouse over the image to see the image hover effect. You can grab both the CSS codes from here. <codes in notepad file>
You can try this CSS hover effect guide to create your first logo hover effect, else do let us know if you get stuck while creating your first image Hover effect. Don’t forget to subscribe to our Email newsletter to keep receiving such updates.