Need help differentiating between image and text links in CSS/HTML
February 9, 2012 9:25 PM Subscribe
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.
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
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:
If that's the case, then the CSS is easy... use a combination of
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):
posted by Bora Horza Gobuchul at 11:56 PM on February 9, 2012
<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
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
Do you have an example of what you're doing now?
posted by cardioid at 11:17 AM on February 10, 2012
This thread is closed to new comments.
posted by phaedon at 10:15 PM on February 9, 2012