How to: Add a hover effect to images
17:35
You may have noticed recently, that on my social media items on the sidebar, I have added a new effect. When the mouse rolled over them, they changed colour. I found a really helpful tutorial here which I'm going to share with you. I am always trying to make my blog look better, and I think this helps.
As I did mine on my social media items, this is what I will write for. However, you can do it for any image by adding the following code to the HTML of the image.
Create or find an image
For this tutorial you will need two versions of the same image that are slightly different, they could be a different colour like mine. I found my social media items on a website(which I couldn't find the link for, sorry, but there are loads out there), and I downloaded them. On publisher, I uploaded the photos and then changed the colour and saved them to my laptop.
Uploading the photos
In blogger, open a new post and upload both versions of all the photos. Now, right click and select "Open in new tab", copy the web link and paste into the post. Do this for all the photos and then delete the photos so that you only have the weblinks in your post.
Adding the code
The code for the hover effect is below but I had to add extra spaces between some of the letters because it wouldn't let me any other way. To add the code to the images, at the top of the page where it says compose, switch to HTML and copy the code above into it. Add all the links like it says below, and repeat for all the images you have.
< a h r e f ="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE">
< i m g s r c ="DIRECT URL OF IMAGE" border="0" onmouseover="this.src='DIRECT URL OF SECOND IMAGE WHEN HOVERED OVER'" onmouseout="this.src='DIRECT URL OF IMAGE'" />
Create or find an image
For this tutorial you will need two versions of the same image that are slightly different, they could be a different colour like mine. I found my social media items on a website(which I couldn't find the link for, sorry, but there are loads out there), and I downloaded them. On publisher, I uploaded the photos and then changed the colour and saved them to my laptop.
Uploading the photos
In blogger, open a new post and upload both versions of all the photos. Now, right click and select "Open in new tab", copy the web link and paste into the post. Do this for all the photos and then delete the photos so that you only have the weblinks in your post.
Adding the code
The code for the hover effect is below but I had to add extra spaces between some of the letters because it wouldn't let me any other way. To add the code to the images, at the top of the page where it says compose, switch to HTML and copy the code above into it. Add all the links like it says below, and repeat for all the images you have.
< a h r e f ="WEBSITE URL HERE" target="blank" title="DESCRIPTION OF LINK/WEBSITE">
< i m g s r c ="DIRECT URL OF IMAGE" border="0" onmouseover="this.src='DIRECT URL OF SECOND IMAGE WHEN HOVERED OVER'" onmouseout="this.src='DIRECT URL OF IMAGE'" />
Where it says "WEBSITE URL HERE", add your social media link. ((If it doesn't have a link you can delete this bit))
Where it says "DIRECT URL OF IMAGE HERE", add the website link of the image you want showing when not hovered over.
Where it says "DIRECT URL OF IMAGE WHEN HOVERED OVER" add the website link of the image you want showing when hovered over.
Putting the photos in the sidebar
In the post that has all the HTML in it, copy all the code you need and then go to Layout < Add widget < HTML/Javascript and paste the code into it. If you preview it, it should all be okay. Save and there you have it!!
I hope this tutorial made sense and please comment down below if you would like more of them! Let me know if you have any trouble and I will try my best to help.
Lots of Love
Laura xx
| Instagram | Bloglovin' | Twitter | Google+ |
6 comments
this sounds really good and helpful. i'm going to save this and i might try it! thank you:) x
ReplyDeleteemjbarker.blogspot.co.uk
Thanks for this tutorial! I have just added social media buttons to my sidebar so this will be a great thing to add to them! I might try this one day! Great post! X
ReplyDeleteAmyx Makeupwithmissa.blogspot.co.uk
This is such a great idea for a post, so helpful!
ReplyDeletePaula
Thirteen Thoughts
Your html posts are always so useful! And your blog design is amazing, I have a lot to learn!
ReplyDeleteonmyayacqua.blogspot.com | Acqua xx
I am totally going to figure out hoe to do this at the weekend, this was so helpful! X
ReplyDeletehttp://thepastelstyle.blogspot.com
Thanks for sharing this! I already have it on my blog but I know so many other people will find it super useful! xx
ReplyDeletethriftyvintagefashion.blogspot.co.uk
Thankyou for commenting, it means so much! Love Laura x