Note: This tutorial is for Blogger blogs
Every blogger has a common goal in mind when creating content: drawing their audience in. If you can keep your reader’s eyes on your content until they’ve read the entire post, then you’ve discovered the secret! But not a lot of blogger’s can say that confidently, including myself. I’m still learning all the tricks behind creating super fantastic content that readers just can’t resist finishing, but I’ve gathered a few tips along the way. Interestingly enough, one of those tips has nothing to do with the words on the page, and everything to do with the images you place between them.
Whenever a blogger asks me for tips on making their posts better, I always say that quality graphics are a necessity. They’re fabulous eye-catchers (I guess that’s kind of obvious), and they add a sense of professionalism to your blog. But what if I told you that those images could work even harder for you? That’s where hover effects come in.
I made two different tutorials for this, with one geared towards those who have coding knowledge/want to learn about coding, and the other for my followers who want absolutely nothing to do with coding. I think I’ll try this method for the rest of my tutorial posts, because I know some people like having a simpler option.
Method one: easy/no editing code
1. From your blog’s Blogger page, go to Template > Customize > Advanced > Add CSS
2. Paste the following code:
3. Press Apply To Blog That’s it! If you want to change the intensity of the transparency effect, just change the “.7” to a different number between 0 and 1. “0” means the image is completely transparent, and “1” means the image is completely opaque.
Method two: editing your blog’s code
1. From your blog’s Blogger page, go to Template > Edit HTML
2. Search for “.post-body img”. If you can’t find it, just add “.post-body img { }” within the “Posts” section of your CSS template. Your CSS template is the area between <b:skin> and ]]></b:skin>.
3. Between the curly brackets, type out opacity:1.0; This will make sure that when your image isn’t being hovered over, it’s completely opaque.
4. Below that section of code, paste the following:
This creates the hover effect. If you want to change the intensity of the effect, just change “.7” to a number between 0 and 1. “0” means the image is completely transparent, and “1” means the image is completely opaque.
This is what the final code should look like:
That’s it! I love pairing this effect with a Pinterest button, because it highlights the button so well. Check out my other tutorial if you’re interested in making one!
If you’re nifty with coding, you can take this basic tutorial and make it your own with a few edits. Maybe add a border, or a text overlay! Take a few seconds to roam around my blog and you’ll notice I’ve hidden hover effects just about everywhere. One of my favorites is the hover drop down menu in my “categories” tab up top.