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.

IMG Opacity - CSS

4 posters

Go down

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
!_NICK_!
!_NICK_!
Active Poster

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

Back to top Go down

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?
Kaizer Lee
Kaizer Lee
Active Poster

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

http://www.medievalchaos.net/forum

Back to top Go down

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: ;
}
Dex♥
Dex♥
Forumember

Posts : 138
Reputation : 6
Language : Calgary

http://www.toonworldacademy.net

Back to top Go down

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.
LGforum
LGforum
Hyperactive

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

Back to top Go down

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!
!_NICK_!
!_NICK_!
Active Poster

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

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum