• X

    Image Hover Effect Using CSS Sprites

    By in Design

    Bluehost hosting

    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.

    CSSEditLogo 125x125 Image Hover Effect Using CSS SpritesI’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”.

    image 1 Image Hover Effect Using CSS SpritesNote 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”

    image 2 Image Hover Effect Using CSS Sprites

    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.

    final image Image Hover Effect Using CSS SpritesWell, 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.

    #css-tuts {
    width:200px;
    height:100px;
    text-decoration:none;
    display:block;
    background-image:url(http://www.shoutmeloud.com/wp-content/uploads/2011/07/final-image.png);
    background-position:0px 0px;
    }
    #css-tuts:hover,#css-tuts:active {
    background-image:url(http://www.shoutmeloud.com/wp-content/uploads/2011/07/final-image.png);
    background-position:0px -100px;
    }

    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.

    Subscribe to Download WordPress Guide Worth $99

    Discover more awesome articles

    Article by

    Mukund has written 30 articles.

    If you like This post, you can follow ShoutMeLoud on Twitter. Subscribe to Blogging tips via RSS or EMAIL to receive instant updates.

    { 6 comments… read them below or add one }

    Dheeraj@techreuters

    Nice article.Thanks for sharing!!!
    I want to ask a question,
    How to use this image hover effect in wordprees blog, to change blog logo on hover?

    Reply

    Mukund

    Well, the final effect isn’t visible as of now! But, I’m sure it will be visible in quite some time! Coming to the question you posted, you need to design your logo and it’s hover effect initially. Place the images one below the other and that will serve as the final image (header image). Now, use this image in your header tag (CSS part). Later, add another class that says #header :hover{} wherein you define your hover effect (position the image) as mentioned in the article and your done! If you find it difficult to understand, then ping me via gtalk. I’ll help you out!

    Reply

    Ajay | symplyfyd.com

    That’s really cool..this will surely make a blog more attractive..thanks for the share mate..

    Reply

    Dheeraj@techreuters

    @Mukund Thanks for your reply.It will really helpful for me.

    Reply

    Mukund

    @Ajay: I would like to see your creative work using the above effect! Let me know once you do so!

    @Himanshu: Yeah! You can use this effect at various places on your theme – header (logo), subscription boxes, navigation bars, etc… Go on! Design your logo, apply the effect and let us know once you do so!

    Reply

    dave

    maybe im on the wrong article anyway wondered if you can help as i’m at my wits end !
    making a wordpress site – image on header way too large cannot find where to adjust image size – i went into header php – but nothing there re image size to tinker with – plus cannot / dont know how to delete original image on header — theme is wp market theme

    very new to html css but am beginning to be familiar where things are and how to change – have been using firebug – problem there as well bcos sync does not work
    - any help very grateful – thanks.

    Reply

    Leave a Comment

    Previous post:

    Next post:

    `