Need help differentiating between image and text links in CSS/HTML

February 9, 2012 9:25 PM

I'm trying to make my image links in a div start at 0.8 opacity, and on hover, bump up to 1 opacity. This works fine - until I also introduce text links to the same div. Then, the 0.8 starting opacity applies to the text as well, making it look weird. Any way to make it apply to the image links only? Thanks.
posted by kmccormi to technology (5 answers total)

Non-Transparent Elements Inside Transparent Elements.
posted by phaedon at 10:15 PM on February 9, 2012

css opacity is inherited from parent nodes, and opacity is inherited in descendant nodes in the dom. there's no way to reset the opacity to 1 in a node.

phaedon's solution is more correct and versatile than this one but depending on the effect you want then if you can't change the dom ordering and if you only want a parent div with a different background then use a PNG background image with alpha
posted by holloway at 11:54 PM on February 9, 2012

With respect to Chris Coyier's expertise (the solution that phaedon linked to) I'm not sure it's actually what you're after, kmccormi. I expect you have markup like the following:

<a href="#">Some text<img src=some_img.jpg></a>

If that's the case, then the CSS is easy... use a combination of :hover with a descendant selector:

a:hover img { opacity: 0.8; }

If you really want to be tricky, add a CSS transition to the default state of the image. (Vendor prefixes for Firefox and Safari/Chrome shown only, to keep the CSS simple):

a img { -webkit-transition: 0.8s all linear; -moz-transition: 0.8s all linear; transition: 0.8s all linear; }
posted by Bora Horza Gobuchul at 11:56 PM on February 9, 2012

^^^ descendant should be ancestor, obviously
posted by holloway at 11:57 PM on February 9, 2012

Even if the markup is not as Bora Horza says, that is some good advice. I'm imagining the trouble is your CSS is being applied to the a tag instead of img.

Do you have an example of what you're doing now?
posted by cardioid at 11:17 AM on February 10, 2012