I'm using opacity and I want to apply it on an image.
This is my CSS code:
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
filter:alpha(opacity=100);
opacity:1;
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}
It works fine in Firefox, Chrome and Safari, but it is not working in Internet Explorer 9. The problem is at the hover effect.
On the simple img the opacity works in IE9, but the hover effect doesn't work. How can I solve this problem?
Opacity is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation.
Please refer: http://www.w3schools.com/Css/css_image_transparency.asp
if no joy,
use compatibility mode
<meta http-equiv="X-UA-Compatible" content="IE=8" >
I had the same problem, try this:
hit F12 (debugging console), then F5 (refresh). IE9 pops up a little box:
'Internet Explorer restricted this page from running scripts or ActiveX controls'
Click the button 'Allow Blocked content' and your opacity should work.
Not quite sure how to ensure that it works automatically.
Related
I have a simple hover function that makes the image more transparent. I'm trying to use the site on IE 11. The weird thing is that on some computers, it works how it's supposed to. On others also running IE 11, it doesn't. I don't know if this is a code problem or maybe just a settings issue. Any ideas?
Here is my image code:
<img alt="Home" class="auto-style8" src="http://contoso/AzureTeam/Images/Home.png">
Here is my css:
.auto-style8 {
width: 150px;
height: 150px;
}
.auto-style8:hover {
opacity: 0.4
}
There's nothing too fancy too it. I don't really understand what is wrong.
Try using css Cross-Browser prefix
like this for example:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
Are you sure all of the computers are on the same version of IE 11? I had a similar issue.
You could try to cover all your bases by doing this:
.auto-style8:hover {
-webkit-opacity: 0.4;
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
-ms-opacity: 0.4;
-o-opacity:0.4;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
}
Check out: http://www.w3schools.com/css/css_image_transparency.asp
About CSS Browser support:
The Opacity property works from the following Browser's version.
Opacity:
IE: 9
Firefox: 2
Chrome: 4
Safari: 3.1
Opera: 9
Maybe in some computers, the IE version is older than 9.
And you should always use vendor prefix:
webkit- (Chrome, Safari, newer versions of Opera.)
moz- (Firefox)
o- (Old versions of Opera)
ms- (Internet Explorer)
If you have access to the computers which your code is not working, you could also test deleting the cache of that computer.
Press F12 > Network > F5 > Right click > Clear browser cache
In IE6 :hover is applied only to HTML a elements that have an href attribute.
In IE7 :hover on elements other than anchors is often slow to react. On large tables this can prove to be almost unusable. A fix is to add position relative (assuming the element is not positioned) to the element being hovered.
In Internet Explorer version 8, the manipulation of elements with negative z-index is buggy when used in conjunction with :hover
You know the part of a modal popup (image lightbox, yes/no dialog) that dims out everything behind it? I call it the Blanket. Cozy.
Anyway, I want my modal to be tucked in by a blanket who is half see-through. I can't seem to get it to work in IE7 and IE8.
Based on my readings from
This CSS Tricks Snippet,
This Quirksmode Article,
and Satzansatz's Article on the Quirky Behavior IE's Schizophrenia Can Yield,
This is what I have come up with:
.blanket {
z-index:100;
position:fixed; top:0;right:0;bottom:0;left:0;
/*//////*/ background:black; /*//////*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
It doesn't work at all. I have no idea why, and I haven't found any permutations where it does work. At all. I can't even make a little static-positioned black square. What's going on?
How can I make opacity work across all significant browsers?
CodePen
The Fullscreen CodePen Result (for testing in IE)
In IE7 & IE8, I just see pure black.
Am I going crazy? Let me know if I'm going crazy..
But I'm starting to suspect that maybe IE10's "Browser Modes" emulation shit is quirky, insufficient, and responsible..
Was it something I've done? Or didn't!?
Please check this DEMO in IE. The menu item name is not visible in IE. It is working perfect in all other browsers.
Any idea??
You were looking for rotation=3
http://jsfiddle.net/fTmxc/11/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
Its because you are using CSS3 transform to rotate the text.
IE 6,7,8 does not support it.
to make it work in ie9 you need to add following code
-ms-transform: rotate(-90.0deg);
you can check this website to make it work in older browsers
http://www.aquim.com/web-article-226.html
I have opacity working in ALL Browsers except IE - the problem in IE (6,7,8) is that the color renders as a SOLID :(
The CSS I am using is legit per the MS Blog Post on IE Opacity Filter
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=75)";
filter: alpha(opacity=75);
The weird thing is that I have my elements structured with Z-Index (overlay with 90, lightbox with 100)
When I set the z-index to -1 - IE Opacity starts rendering, but >0 and it appears solid again?
Any ideas!? Its driving me nuts!
Are you using a lightbox plugin or are you trying to make your own? You might want to check out slimbox2 and see how he does it since he claims compatibility with all browsers of the rainbow.
I have a very simple requirement, make a link look disabled. Why is it this hard??
.disabled {
-moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50;
}
Is my style. I have applied it to an li...but in IE7 it just does nothing. FF and IE8 it seems to work in, but IE7 is just rubbish
Any clues?
As far as I remember, an element needs either layout (e.g. "zoom: 1") or a background color for filter:alpha to work.
Can i make a suggestion that I appreciate not exactly what you want but would give you an effect similar to opacity.
Open your image editor type some text in your default link colour
Change the opacity to 50%
Capture the new colour value
.disabled {
color:#yournewcolorvalue;
}
for example if i take default blue link color #0000FF
the 50% opacity value is #7F7FFF
It needs explicit dimensions or a zoom factor to "have layout" in IE land.
Not sure, but try 0.50 instead of .50
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity:.5;