This is an image depicting my problem
The grey overlay is on top of the body tree and has the following css:
overlay{
z-index: 500;
background: black;
width: 100%;
height: 100%;
opacity: 0.7;
position: absolute;
display: none;
}
The div beneath the overlay (with the top border) has the following css
inside_div{
height: 575px;
width: 50%;
float: left;
border: 2px solid green;
padding:20px;
overflow-y:scroll;
}
This class is added to .inside_div dinamically:
.inside_div(another_class_added_dinamically){
outline: none;
border-color: green;
box-shadow: 0 0 10px green;
opacity: 1;
-webkit-animation: glow 0.7s infinite alternate;
-webkit-transition: border 0.7s linear, box-shadow 0.7s linear;
-moz-transition: border 0.7s linear, box-shadow 0.7s linear;
transition: border 0.7s linear, box-shadow 0.7s linear;
}
And all elements inside the "inside_div" are added the following class dinamically: (notice the following one affects all children too with the '*')
.inside_div(another_class_added_dinamically), .inside_div(another_class_added_dinamically) *{
z-index: 1000 !important;
}
However, as seen in the image, not all elements stand out (the background inside the div remains grey). I would need to know a way of toggling the two previous classes dinamically to highlight the elements as described. What exactly is wrong here? Thank you very much for your help
From W3 Schools:
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Very likely the elements you are giving the z-index do not have position on one of those three.
Hope that helps
You don't seem to set the position property on your inside_div element. You should post a fiddle with your code.
A bit late with this answer, but your problem could be caused by the fact that your overlay div has an opacity < 1. As a result, a new stacking context is being created, which might explain the behavior you see. It's hard to tell without seeing all of your code. Here is an excellent article explaining stacking context in more detail:
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
Related
I have a div that has a css animation transition for it's height when you hover over it. When you also hover over it, the background color change from pink to orange. However, I don't want this background color to change until after my height is done transitioning. Is there a way I can do this? I looked into using transition-delay but it seems that it can only be applied to one transition property? Thanks!
div {
margin: 3rem;
height: 10rem;
width: 10rem;
background: pink;
transition: height 0.3s ease;
}
div:hover {
height: 20rem;
background: orange;
}
<div />
You can specify delays for any property you like:
div {
transition: height 0.3s ease, background 0.3s ease 0.3s;
}
(In this case the last 0.3s defines the delay for the background color, see e.g. on MDN)
Using hover with transition ease-in for an image, taking cursor out of the image makes it unpleasant
i've tried :after ,but i'm not sure if thats what i need, if it is , i didn't figure it out (i'm a noob)
this is the code i'm using for hovering
.movies img:hover
{
border: 7px solid white;
padding: 0px;
width: 230px;
transition: all 0.1s ease-in;
}
How to add a transition(or something else to smooth it)to make the new border created by the hover disappear with a transtion ?
I guess you can smooth it (as you named it) by throwing out
transition: all 0.1s ease-in;
to your .movies img class, but I'm not sure if that's the solution you're looking for.
Have you got a codepen project for this problem?
I am trying to do a simple image fade on rollover - works fine and smooth in Chrome, but Firefox is a bit jumpy. I've tried doing the backface-visibility trick on the container, but still no luck.
Anyone have any ideas?
JSFiddle
HTML
<div class="link-box large">
<div class="image">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt="">
</div>
</div>
CSS
.link-box .image img { transition: all .2s ease-out; width:200px; }
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }
My best guess is that setting the width of the image to 200px and leaving the height unspecified is causing the browser to calculate the height of the image. If the height calculates to a nice whole number it isn't an issue. If the height calculates to a decimal it may be the cause of the problem.
In this case the natural dimensions of the image are 275px by 183px.
By changing the width of the image to 200px you are shrinking the image to 72.727272...% of its natural size.
275/200 = 0.727272... Or if you prefer fractions: 275(8/11) = 200
Now running the same equation on the height yields:
183(8/11) = 133.090909...
It looks like, under the normal run of things, the partial pixels are cropped, but during the transition the partial pixels aren't being cropped, and the image is warped slightly to show the partial pixels within the same height.
Cropped down to 133px:
Not cropped and slightly warped:
Now that we have a good hypothesis on what's causing the problem, on to the solutions:
You can hard code the height of the image:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
height: 133px; /* manually set the height */
}
Or if you would rather not hard code the height, you can also fix the issue with an anti-alias hack, just add a box-shadow.
Working Example
.link-box.large:hover .image img {
opacity: .65;
box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */
}
Or if you're concerned about the cross-browser compatibility of using a box-shadow, you can also use a transparent border:
Working Example
.link-box .image img {
transition: all .2s ease-out;
width:200px;
border: 1px solid transparent; /* add transparent border */
}
Works good on my Firefox.
Anyway you can try to add some special attributes that will prepare the browser for the transition and actually render the element with possible transformation in mind.
Such an attribute is transform: translate3d(0,0,0);
Like this :
.link-box .image img {
transition: all .2s ease-out;
width:200px;
transform: translate3d(0,0,0);
}
.link-box.large { position: relative;}
.link-box.large:hover .image img { opacity: .65; }
I have some css that gradually changes the background colour of an element when hovered on and the links below it.
It works perfect in Chrome and IE9+ but in FF it only works on the element you hover on and it instead immediately changes the colour on the elements below
EXAMPLE
I'm guessing the problem lies somewhere here:
.tree li {
float: left; text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
What do I need to change/add to get it to work properly in FF
Try setting the same transition on the element(s) below as well.
I'm guessing you want the lines in your example to have the same effect. I've updated the example with this JsFiddle.
Edit:
I added the transition CSS to all classes that handles the border you use to draw the lines
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
I would like to animate an <a> tag so when in :active state it will move to the right and when going back to regular state it would animate back to the left.
Currently it is animating on click but when I leave the mouse button it jumps back with no animation, how can I reverse the animation?
Here is a simple example, please note that i have to use position:relative;left:20px since in the real app this code is inside an absolutely positioned element and for some reason, using margin causing unexpected behaviour.
Just use left: 0; for a and use position: relative; in a rather than a:active
Demo
CSS
a {
display: block;
background: red;
-webkit-transition: left .2s ease-in,margin .2s ease-in;
-moz-transition: left .2s ease-in,margin .2s ease-in;
transition: left .2s ease-in,margin .2s ease-in;
left: 0;
position: relative;
}
Just a suggestion, moving links on click will annoy the visitors, why not use it on hover
Demo
If your live code is like the example, you just need to put position:relative; and left: 0px; on the a {} rule too.
What is happening is when you stop hovering/release click, it loses the position: relative, because it isn't on the current class. Without the position rule, the left rule is ignored.