June 21st, 2013, 01:01 AM
CSS Image hover opacity
I'm very new to this all - so apologies if I'm inadvertantly stupid!
I've had to move my site because the person who hosts it has disappeared of the face of the earth and because it was so unexpted I have no budget so I'm doing it myself. Have some html and css knowledge but limited and I'm feeling my way here!
I'm trying to show my social media images as 80% opacity, but as 100% on hover.
I've specified them as a smiconimg class, and added some css in my stylesheet, but although I've looked this up and thought I was inputing what I'd been told, it just doesn't work, Is there somethign obvious I'm doing wrong?
<a href="/newsletter-signup"><img alt="" src="/user/pageimages/newsletter.png" class="smiconimg" align="right" height="34" width="35" />
Really appreciate any help at all!
June 21st, 2013, 03:47 PM
Welcome to DevShed Forums, recidivist.
The align attribute is obsolete (add "float:right;" to your ".smiconimg" rule instead) and, as far as I can tell, Webkit browsers never used a prefixed variant of the "opacity" property. Otherwise the code you posted looks fine. The problem is most likely elsewhere.
The first step in debugging should always be making sure that your code is valid (in order to rule out any errors as the cause for the problem).
http://jigsaw.w3.org/css-validator/ (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)
P.S. When posting code, please place it between [code][/code] tags.