1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Rep Power

    CSS Image hover opacity

    Hi everyone

    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" />


    .smiconimg {
    -webkit-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;

    .smiconimg:hover {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;

    Really appreciate any help at all!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    USA (verifiably)
    Rep Power
    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.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo