The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

IMG Opacity - CSS

View previous topic View next topic Go down

Solved IMG Opacity - CSS

Post by !_NICK_! on 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_!
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 on 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
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♥ on 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♥
Forumember

Posts : 138
Reputation : 6
Language : Calgary

http://www.toonworldacademy.net

Back to top Go down

Solved Re: IMG Opacity - CSS

Post by LGforum on 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
Hyperactive

Male Posts : 2260
Reputation : 258
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: IMG Opacity - CSS

Post by !_NICK_! on 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_!
Active Poster

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

Back to top Go down

View previous topic View next topic Back to top


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