How to add a hover effect to images - step by step tutorial

A client I’ve been working for recently wanted some rollover (hover) effects incorporated into some of the images and image maps she had on her blog. I think rollover effects are so cool and add a lot to the character of a website. I then started playing around with some more advanced effects and realized the possibilities are endless! So for today’s tutorial I wanted to first show you how to add a basic hover effect to an image and then later on I’ll go into some more advanced things you can do. I’m going to be adding a cool effect to basic social media icons. This is what we’re going to end up with: (Hover your mouse over an icon)

Step 1: Create your icon in the color you want the button to be. Then, without moving anything, change the background color of your image to the color you want to see when your mouse hovers over. Making the images the exact same size if very important. If you don’t your line up buttons will become misaligned when hovered over.So now you have two images:Image #1

Image #2

Step 2: Upload your images to an image hosting website like photobucket or image shack. Take note of the direct URL of both images.Step 3: Enter your URLs into the code below (be really careful when pasting your information in, don’t erase any of the quotation marks):

You’ll end up with something like this:

Step 4: Insert this code into the html of your blog or website. And enjoy! Play around with different colors and effects and have fun!