How to change the hover opacity of an image quick ‘n’ dirty

So your photos needs some snazzin’, eh? I’m a fan of the effect that changes the opacity of the image when your mouse hovers over the image. And it’s really really simple and easy to do. I know that Kyle Magocs did a wonderful and super detailed tutorial covering many bases of the hover property, but this is going to be super rudimentary for yinz who need some baby steps (like me)!

Step 1: Head to your CSS stylesheet (you’ve got one, right?). There’s two ways we can do this, and I’ll show you both!

First way: Say you’d like to make every image on your site have a change in opacity when you hover over it. Okay, cool! Check out the area highlighted in blue in the image below.

The img.hover is really what you want to focus on, but notice that you can also determine the opacity of the image prior to hover over in the img section. So, if you wanted to make your image 100% opacity on hover over instead of a decreased opacity (as I’m showing here), you can alter this in the img section!

NOTE: The stuff like filter:alpha(opacity=35); and /* For IE8 and earlier */ are needed for increased compatibility with different browsers!

The decimal 0.35 as well as the number 35 indicate that I have the opacity set to 35%.

That’s it for way one! You are done!

Second way: This way involves Step 1 & Step 2.

Okay, you want to make only some of the images have a hover over effect. Totally doable! We just need to create a special div that will tell the images on the page what to do (we’re bossy like that)! The image below will show in the highlighted blue area what exactly you need to type in your style sheet.

How this works is you will have to enclose the image tag in your HTML by these special divs, so that the page knows to display only those images with an altered opacity on hover-over. Go onto Step 2!

Step 2: Make sure that in your HTML you have your image enclosed by the correct div tags! Look at the section highlighted in blue. See that the div class is assigned to img? That’s tells your HTML how to communicate with the CSS document and perform the necessary functions!

Here’s an example of what it will look like in a GIF! (Author apologizes for crappy cropping that makes the images look two different sizes. Whoops!)

Humble helper,

Erin McGaw


~ by neonxbats on September 24, 2012.

One Response to “How to change the hover opacity of an image quick ‘n’ dirty”

  1. I like this tutorial. I appreciate the kid gloves you used with the step by step directions. By breaking it down to the bare bones I’m now capable of understanding more complicated instructions about hovering.


Comments are closed.

%d bloggers like this: