Tuesday Blog Tips: Hover Effects For Your Blog Photos!



It's been a while since the last one but today I wanted to share my first Tuesday Blog Tips of 2015!
Back in November of 2014, I decided that every Tuesday I was going to share different tips, tricks and useful codes I've learnt which could help improve your blog. When I started this idea, it was a weekly topic on my blog but I've since decided that I'm just going to do it whenever I feel like I have something that's genuinely useful, instead of trying to force an idea every week. So, on that note, today I wanted to share a few handy codes I've learnt recently to add a few different hover effects on your blog photos!

Why would you want hover effects on your blog photos in the first place? One thing I like to do on my own blog is create my own thumbnails for different topics, and adding hover effects to those images, let's the user know that the images are interactive and visitors are more likely to click on them.

What am I going to show you?
1. How to make your blog photos black and white when you hover over them - html vs. css
2. How to make your blog photos fade when you hover them

1. Black and White Image Hover
There are two ways you can do this, using html or using css.
~ The html way ~
For this, all you need is one code to embed:







If you're using an image as a hyperlink, then you would put the link you want the photo to take you to into where it says WEBSITEURL, otherwise you can ignore that part of the code. For the black and white part of the code, use website a website like either Tinypic or Photobucket to upload the image and create a link. Upload a coloured version of the photo first and then copy the link into where it says FIRSTIMAGEURL, you will notice it says that twice in the code, paste the link into both places. Then, make a black and white coloured version of your photo, using either Photoshop, a smartphone app or even a free online photo editor, and upload it again to either Photobucket or Tinypic and then copy the link into where it says SECONDIMAGEURL. Where you see onmouseover="", this is the image you will see when you hover over the image and onmouseout="" is the image you will see when you move your mouse off the image.

Here's what it should look like:

 

As you can see, although it works, it sometimes lags. So, I found another way! This way uses css instead html and it's a lot easier to do! All you have to do is copy this code into your template designer.

.post-body img {
    filter: url("data:image/svg+xml;utf8,grayscale");
 /* Firefox 3.5+ */
    filter: gray;
 /* IE6-9 */
    -webkit-filter: grayscale(0%);
 /* Chrome 19+ & Safari 6+ */;
}
.post-body img:hover {
    filter: none;
    -webkit-filter: grayscale(100%);

}

Unfortunatly, I can't demonstrate this on my blog because then I won't be able to show you the other hover effects because you won't see them! But this piece of code picks out the photos on your blog, and allows you to control the colours. Where it says grayscale(0%), this means the image will be in full colour, and then where it says grayscale(100%), that means it will remove the colour from the image when you hover over it, making it black and white. It also means you can adjust the percentage levels, so you can change it from 100% to, for example, 50%, so the image will look slightly desaturated instead of completely black and white. Or, you could also switch the percentages, so where it says 0%, change it to 100% and vice versa, which means that the image will start off looking black and white, and then the colour will show when you hover over the image. 

So what's the difference between using html and css?

HTML PROS
You can select which images you want to appear black and white by only embedding the codes where you want them.

HTML CONS
Can lag sometimes because 3 image codes are being loaded at once.
If you want to apply it multiple images, you have to code every single one.

CSS PROS
Once you embed the code in the template designer, you don't need to do anymore coding, or use external websites like Tinypic or Photobucket, so you can use the multiple uploader if you want to upload more than one.
The hover reaction time is instant because it's not trying to load anything, the css has already read the colour information when you embedded the code.
You can adjust the amount of effect you want on your images.

CSS CONS
It applies the effect to all photos because it's a css code for the entire website not just individual codes for each image like the html. Although it may not be a problem, it still might be confusing when you hover over an image and it changes even though it's not interactive! 

Obviously, the choice is up to you because it depends on what you prefer! My preference is the css method because the reaction is instant and I like how much control you have over the effect.

2. Fade image on hover
So the second effect is one which I use on all of my image links, It's just a simple fade that lets you know that it's interactive. All you have to do is, upload your image as you normally would, and then when you click on html and look at the html of the image. It will look like this



inbetween the " and > add another piece of code that looks like this: class="fade" and that does what it says, it fades the image when you hover over it, looking like this:









I like this code because it's a nice simple effect, makes a change from having it black and white, and although you do have to add it to each photo individually, the reaction is a lot quicker because it's not trying to load other images at the same time.


And there you have it, different hover effects for your blog photos! I hope you found this blog post helpful or interesting! If you know how to make any of these effects better, or if you know any different hover effects, please let me know in the comments! If you'd like me to cover a certain topic in Tuesday Blog Tips, you can also leave a request in the comments!

Previous Tuesday Blog Tips:
16.12.14 - Responsive Videos
09.12.14 - 5 Reasons All Bloggers Need Pinterest!
02.12.14 - Improve Your Comments With Disqus
25.11.14 - How To Increase Blog Interaction with Add This
18.11.14 - Improve Your Blog With Google+

Thanks for reading! 
♡ Katya