IMG Opacity - CSS Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
4 posters

    IMG Opacity - CSS

    !_NICK_!
    !_NICK_!
    Active Poster


    Male Posts : 1505
    Reputation : 69
    Language : English, HTML, and CSS
    Location : In the middle of no return.

    Solved IMG Opacity - CSS

    Post by !_NICK_! Sun 2 Dec 2012 - 9:05

    Okay, so I've been trying to add opacity to all images with links. When I say 'with links' I mean images that have a link if you click the image.

    I've tried this code, but it did not work
    Code:
    img a {
      opacity: 1.00;
    }

    img a:hover {
      opacity: 0.80;
    }

    I know this code below works, but it just does every single image, link or not.

    Code:
    img {
      opacity: 1.00;
    }

    img:hover {
      opacity: 0.80;
    }


    Last edited by !_NICK_! on Sun 2 Dec 2012 - 19:01; edited 1 time in total
    Kaizer Lee
    Kaizer Lee
    Active Poster


    Female Posts : 1064
    Reputation : 54
    Language : English, Tagalog, Spanish and Chinese
    Location : Philippines

    Solved Re: IMG Opacity - CSS

    Post by Kaizer Lee Sun 2 Dec 2012 - 9:47

    Code:
    a.mainmenu{
    filter:alpha(opacity=100);
    -moz-opacity: 1.;
    opacity: 1.0;
      }
    a.mainmenu:hover{
              filter:alpha(opacity=90); 
    -moz-opacity: 0.65; 
    opacity: .50;
        }

    a:hover{  opacity:0.65;  -moz-opacity: 0.65;  filter: alpha(opacity=65);  }

        a:hover{
            text-decoration: none !important;
            }
            a{
            text-decoration: none !important;
            }

    The code above works for anything that has a href/url codes or do you want just the one with the images only?
    Dex♥
    Dex♥
    Forumember


    Posts : 138
    Reputation : 6
    Language : Calgary

    Solved Re: IMG Opacity - CSS

    Post by Dex♥ Sun 2 Dec 2012 - 10:11

    Next time post the url for your forum.
    I've edited your code a bit, you might not be using the right browser. Try this instead.

    Code:
    img a {
      opacity: .5;
      -o-opacity: .5;
      -moz-opacity: .5;
      -webkit-opacity: .5;
    }

    img a:hover {
      opacity: 1;
      -o-opacity: 1;
      -moz-opacity: 1;
      -webkit-opacity: ;
    }
    LGforum
    LGforum
    Hyperactive


    Male Posts : 2265
    Reputation : 264
    Language : English
    Location : UK

    Solved Re: IMG Opacity - CSS

    Post by LGforum Sun 2 Dec 2012 - 13:35

    Well you can't have an anchor tag inside of an IMG tag since there is no closing IMG tag. The IMG tag is inside the anchor tag.

    So the selectors would be:
    a img { styling... }
    a img:hover { styling... }

    That tackles all images inside links.
    !_NICK_!
    !_NICK_!
    Active Poster


    Male Posts : 1505
    Reputation : 69
    Language : English, HTML, and CSS
    Location : In the middle of no return.

    Solved Re: IMG Opacity - CSS

    Post by !_NICK_! Sun 2 Dec 2012 - 18:52

    @Kaizer Lee - That really isn't what I wanted. I just wanted the images.

    @Dex♥ - There is no reason to post my forum url.

    @LGforum - I love to read your work and tutorials. This really does make since now that I think about it. Thanks LGforum!

    Solved, thanks to LGforum!