Opacity Rollover Css Looks Bad In Ie |
||
Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.
In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.
Zymic Webmaster Forums Web Design & Development Client Side Scripting HTML and CSS |
||
![]() |
Opacity Rollover Css Looks Bad In Ie |
||
Jul 17 2008, 01:28 AM
Post
#1
|
|
|
Newbie ![]() Group: Members Posts: 27 Joined: 11-July 08 From: Texas, USA Member No.: 45,276 |
Hello,
My website uses the method of combining two images into one and moving the background position on rollover, but I'd like to use CSS to do the rollover so that I can use one image at a lower file size, since the image I'm currently using is about 263 kb (which has already been dramatically decreased from 418 kb when I was using two images). However, it looks...pretty bad in IE but works perfectly in Firefox. So I was wondering if there was some kind of fix or workaround for it. Here's my test Web page for the CSS rollover (has a picture of what it looks like in IE as well). http://loveandasandwich.com/teststuff/index.html Here is my source code: CODE <html> <head> <style> .pic, a.pic, a.pic img { filter: Alpha(opacity=60); -moz-opacity: 0.7; } a.pic:hover, a.pic:hover img { filter: Alpha(opacity=100); -moz-opacity: 1.0; } </style> </head> <body> <a class="pic" href="#"><img class="pic" src="clickme.png" border="0" alt=""></a> <br><br> <img src="ie.jpg"> </body> </html> I posted this in HTML and CSS because that's what my code uses, but a JavaScript fix would be fine, too. |
|
|
Jul 17 2008, 05:42 AM
Post
#2
|
|
![]() Hosting Abuse Staff ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Moderators Posts: 2,933 Joined: 14-February 08 From: Fort Myers FL, USA Member No.: 10,089 |
I believe this is what you were looking for. It even lets you change the image when you click the mouse on the image.
http://www.tutorio.com/tutorial/pure-css-image-rollovers |
|
|
![]() |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users) |
||
| 0 Members: | ||
Forum Jump |
||
| Lo-Fi Version | Time is now: 21st May 2013 - 01:07 PM |