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.
The forum of the forums
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_! December 2nd 2012, 9:05 am

    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 December 2nd 2012, 7:01 pm; 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 December 2nd 2012, 9:47 am

    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♥ December 2nd 2012, 10:11 am

    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 December 2nd 2012, 1:35 pm

    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_! December 2nd 2012, 6:52 pm

    @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!

      Current date/time is November 11th 2024, 8:39 pm