Semi-Transparent Hover over image?

[Trying][1] to get a semi-transparent color to apply to an image on hover, but am not successful.

Recommendation?

I’ve tried applying:

.programs > div:hover {
opacity: 0.7;
background: rgba(255,255,255,0.7);
} 

and I’ve tried

.programs > div img:hover {
opacity: 0.7;
background: rgba(255,255,255,0.7);
}

But neither seemed to have worked. Both results with no semi-transparent color on the image during hover.

Recommendation?

The first one works. On the website, you have opacity misspelled in yoru stylesheet. Simple CSS validation would show this.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fnettra.net%2Fdemo-sites%2Fffc%2Fdevelopment%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

1003 .programs > div:hover Property opactiy doesn’t exist : 0.7

I guess if I spelled it correctly the first time it wouldn’t have been an issue!

Thank you for the second set of eyes, RyanReese.

Even the best of us need it sometimes :wink: . You’re welcome.

1 Like