• Home
  • About
    • About
    • Contact
    • Privacy Policy
    • Disclosure
    • Work With Me
  • College
    • Dorm Life
    • Money and Budgeting
    • Organization
    • Productivity
    • Studying
  • Blog Advice
    • Starting A Blog
    • Favorite Blog Tools
    • Blogging Resources
    • Making Money
    • Blog Growth
    • Income + Traffic Reports
    • Design
    • Coding Tutorials
    • Social Media
    • Genesis Framework
    • WordPress
    • Blogger
  • Wellness
  • Lifestyle
  • Career
    • Internships
    • Interviewing

Jessica Slaughter

How To Create A Hover Effect For Your Blog Images

in Blogging, Coding Tutorials on 01/24/15

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.

hover effect

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.

7 Comments

  • Twitter
  • Facebook 0
  • Pinterest 6
« How To Build A Sidebar Sponsorship Program
7 Must Have Apps For Bloggers »
Jessica Slaughter Blogger

Hey there! I'm Jessica, a 22 year old Software Engineer at Google living in Seattle, Washington. Welcome to my blog! Expect a lot of college, blogging, career, and healthy living advice along with some mixed-in life ramblings!

Follow

Top Posts & Pages

  • 12 College Dorm Room Must Haves
    12 College Dorm Room Must Haves
  • How To Customize The MailChimp Signup Form On Your Blog
    How To Customize The MailChimp Signup Form On Your Blog
  • Finding Your Instagram Style
    Finding Your Instagram Style
  • Tips For Living Off-Campus In College
    Tips For Living Off-Campus In College
  • How To Earn Money Using ShopStyle Affiliate Links
    How To Earn Money Using ShopStyle Affiliate Links
  • Lazy Meal Prep Ideas for College Students
    Lazy Meal Prep Ideas for College Students

Copyright © 2022 · Design by Jessica Slaughter

Copyright © 2022 · Glam Theme on Genesis Framework · WordPress · Log in

Disclosure

Some of the links below are affiliate links, which means that if you click on a product link, I may receive compensation. This compensation comes at no additional cost to you, and as always I only recommend products I trust!

Jessica Slaughter is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.