I have set opacity for a overlay which is working fine in FF, Chrome, Safari and IE9 but not in IE8. I googled alot but did not find any solution.
my css code is
#overlayEffectDiv {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
width: 100%;
height: 100%;
filter: alpha(opacity = 50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.50;
background: #000;
position: absolute;
top: 0;
left: 0;
z-index: 3000;
/* hide it by default */
display: none;
}
In FF it is looking as below:
but in IE8 it is looking as below:
Found solution here. Opacity was not the problem I did some debugging and found it was working fine for ie8 the issue was with jquery fadeIn and fadeOut. jQuery fadeIn was making translucent background to turn solid.
Thanks to all who helped.
I don't think you syntax for the filter is correct:
http://blogs.msdn.com/b/ie/archive/2009/02/19/the-css-corner-using-filters-in-ie8.aspx
this might not be the cause of the problem but it might be worth ruling it out.
May be you have define zoom also. write like this:
#overlayEffectDiv {
width: 100%;
height: 100%;
filter: alpha(opacity = 50);
opacity: 0.50;
*zoom:1;
background: #000;
position: absolute;
top: 0;
left: 0;
z-index: 3000;
display: none;
}
If the problem occurs for some animation effect involving the layer, you could avoid use filter at all in IE and use instead as a repeated background a small (not too small, like 2x2, use e.g. 100x100) transparent png file with a black background color and ~80% opacity
Related
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I'm having an issue with my nav bar in internet explorer and I don't know how to solve it and have been trying to for hours. Below is the code that I think is the problem.
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
Internet Explorer does not support CSS variables.
You might be able to use a polyfill to work around the limitation.
I'm working on a new overlay screen technique for a site that I'm working on. I want to leverage animation to CSS because it is easier, and faster than JavaScript animations. I'm doing something simple, but I'm having trouble with webkit-based browsers like Chrome and Safari.
This is the code I'm using:
body:after {
content: '';
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: -1;
transition-duration: .5s;
-webkit-transition-duration: .5s;
opacity: 0;
}
body.dimmed:after {
z-index: 9999;
opacity: .7;
}
AS you can see, it uses the after pseudo-element, and based on the body class it animates it to a show it or hide it. It works well on Firefox, but not on Chrome or safari. On these browsers the animation does not happen, and the change is instantaneous, which is not what I want. If you apply the same CSS to the body, rather than the pseudo-element, the animation happens:
body {
content: '';
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
z-index: -1;
transition-duration: .5s;
-webkit-transition-duration: .5s;
opacity: 0;
}
body.dimmed {
z-index: 9999;
opacity: .7;
}
This makes me think that transitions do not apply to pseudo-elements on Chrome. Should this be reported as a bug?
It's a known bug, known for years already:
https://bugs.webkit.org/show_bug.cgi?id=23209
http://code.google.com/p/chromium/issues/detail?id=54699
BTW, at the moment you could try to use this technique: http://kizu.ru/en/pseudos/ — by triggering the transition on the element itself and then inheriting the value to the pseudo-element. That won't work for every property (for opacity for example), but you could weork around with that using some imagination.
I'm having a problem with CSS 3D perspective property.
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>
I just want to animate the figcaption at :hover to perform a folding-down effect (like http://davidwalsh.name/demo/folding-animation.php) from -90deg to 0deg , considering that -90deg represent the block flatten (and so not visible)
/** vendor prefixes have been removed for better readability **/
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 500ms;
transform: rotateX(-123deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
The problem is that perspective does not give the same render for Chrome and Firefox.
I had to set manually the figcaption default transform to rotateX(-123deg); depending of the perspective value which is 500px, and it works well on Chrome, but not on Firefox.
Theoretically, it should be -90deg when not :hover and 0deg when :hover, but seems that the perspective attribute changes the length of the depth field and so -90deg does not works anymore.
I wonder what are the best practices when playing with perspective and rotate in order to make it works well on all recent browsers ?
Best regards.
PS: Just copy/paste the HTML & CSS and try it in Chrome and FF, you should immediately see what's wrong ;)
I know it won't be helpful, but personnaly I tried some experiments with perspective and each browser render the perspective in a different way. Some browsers don't support the perspective. So, your application won't be accesible to everyone, maybe you should use another technology until all of the main browsers are fully compliant with the perspective.
Probably it's too late for this answer to be useful.
Anyway, the best way to make the element invisible is to keep the angle at 90deg, but set the perspective origin to be just above it. (No need to figure the exact angle that will get the desired effect)
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
perspective-origin: top center; /* added this setting */
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 2s;
transform: rotateX(-90deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>
What is a syntactically clean solution to run a chain of individual CSS3 transitions on a single element, one by one? An example:
set left to 10px and opacity to 1 through 200ms
set left to 30px through 500ms
set left to 50px and opacity to 0 through 200ms
Can this be done without JavaScript? If not, how to code it cleanly with JavaScript?
I believe you want a CSS3 animation where you define the CSS styles at different points in the animation and the browser does the tweening for you. Here's one description of it: http://css3.bradshawenterprises.com/animations/.
You will have to check on browser support for your targeted browsers.
Here's a demo that works in Chrome. The animation is pure CSS3, I only use Javascript to initiate and reset the animation:
http://jsfiddle.net/jfriend00/fhemr/
The CSS could be modified to make it work in Firefox 5+ also.
#box {
height: 100px;
width: 100px;
background-color: #777;
position: absolute;
left: 5px;
top: 5px;
opacity: 0;
}
#-webkit-keyframes demo {
0% {
left: 10px;
}
22% {
opacity: 1;
}
77% {
left: 30px;
}
100% {
left: 50px;
opacity: 0;
}
}
.demo {
-webkit-animation-name: demo;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
In pure CSS this can be done with the transition-delay property, with it you can delay the second and third transition.
I personally would like a JS solution better. timeouts or the "transitioned" event can be used to achieve this.
I would also suggest the script.aculo.us (or the beta v2: scripty2), it is especially designed to make programming these kinds of things efficient and easy.