Opacity Hover Pic-Text

[BlakeN]

Hi,

Would code would be required to recreate the hover effect that is taking place in the top middle of this page http://www.charitywater.org/ ?

If you look at any one of the three pictures the dark overlay fades out when hovered over but the text does not lose any opacity.

I would be implementing it for the home top section of the executive pro theme.

All that I have found in search is:
CSS3:
img.opacity {
opacity: 0.5;
filter: alpha(opacity=50);
}

img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
}
HTML:

Thanks for the help.

http://directmktg101.com/

[protechig]

It's pretty easy:

.home-top img {
   opacity: 0.5;
}

.home-top img:hover {
   opacity: 1;
}

Please note i'm not including alpha opacity (it's for IE I believe).

For future reference, you should look at firebug or Chrome Developer tools to test these kinds of things out.

Hope this helped 🙂

---

Zach Russell
President, ProTech Internet Group

[BlakeN]

Thanks for the quick reply.

I was able to implement the code above prior to posting the question. I wanted to recreate the example http://www.charitywater.org/ where it fades from dark to light and the text does not fade.

[BlakeN]

I just realized I only need to add the opacity in the image. It's early here.

Thanks again.

[protechig]

There are several ways in which this could be done. I would encourage you to use firebug or Chrome Developer Tools to see exactly what CharityWater is doing, then you'll be able to replicate it exactly 🙂

---

Zach Russell
President, ProTech Internet Group

[Author]

Posts