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)
<a href=”LINK URL“><img src=”URL OF FIRST IMAGE” onmouseover=”this.src=’URL OF SECOND IMAGE‘” onmouseout=”this.src=’URL OF FIRST IMAGE AGAIN‘” /></a>
You’ll end up with something like this:
<a href=”https://www.facebook.com/CreatingMyOwnCareer”><img onmouseover=”this.src=’http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/facebook2_zpsf363a771.jpg’” onmouseout=”this.src=’http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/facebook1_zps887404cd.jpg’” alt=”" src=”http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/facebook1_zps887404cd.jpg” /></a>
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!