Good Day
I am using the CSS transition effect on a hover selector, but the 2nd part of the transition is not smooth - When I hover over the element, it moves smoothly. When I exit hover, the element drops back non-elegantly (not smooth/timed). How do I fix it?
#login{
margin-top: -10px;
margin-left: 10px;
display: inline-block;
}
#login:hover {
margin-top: 0px;
-webkit-transition: margin-top 0.2s ease-out;
-moz-transition: margin-top 0.2s ease-out;
-o-transition: margin-top 0.2s ease-out;
-ms-transition: margin-top 0.2s ease-out;
}
#login a{
background: #003399;
font-size: 38px;
color: #fff;
}
<div id="login" class="span1">
login
</div>
NOTE: look at my JSFIDDLE to see what I mean
As soon as you leave the div the :hover pseudo class is no longer satisfied. Thus the div loses the transition properties.
Simply move the transition block from #login:hover to #login and you are done.
You have to define also transition to normal state.
Edit: Like Raffael said it is only necessary to define transition effect in normal state
#login{
margin-top: -10px;
margin-left: 10px;
display: inline-block;
-webkit-transition: margin-top 0.2s ease-out;
-moz-transition: margin-top 0.2s ease-out;
-o-transition: margin-top 0.2s ease-out;
-ms-transition: margin-top 0.2s ease-out;
}
#login:hover {
margin-top: 0px;
}
#login a{
background: #003399;
font-size: 38px;
color: #fff;
}
<div id="login" class="span1">
login
</div>
DEMO
Related
I have an element that toggles between two classes when the user clicks on it. The two properties that change between classes are margin and background-color.
When I add transition to only one element, either one, the transition works well but when I use both transitions the background-color one does not work. I tried doing individual transitions for each property and combining both properties in one transition but I can't get it to work. When I disable the margin transition, the background-color transition works fine, but as soon as I enable the margin transition again, the background-color transition stops working.
This is my CSS:
.switch_Active {
background-color: $not_selected;
-webkit-transition: background-color 5000ms;
-moz-transition: background-color 5000ms;
-o-transition: background-color 5000ms;
transition: background-color 5000ms;
border-radius: 50%;
height: 20px;
margin-left: 45%;
transition: margin-left 0.5s ease;
width: 20px;
}
.switch {
background-color: $selected;
-webkit-transition: background-color 5000ms;
-moz-transition: background-color 5000ms;
-o-transition: background-color 5000ms;
transition: background-color 5000ms;
border-radius: 50%;
height: 20px;
margin-left: 50%;
transition: margin-left 0.5s ease;
width: 20px;
}
I tried looking up online but I couldn't find any limitations with the transitions. I appreciate any help I can get.
You can combine transitions:
transition: background-color 5000ms, margin-left 0.5s ease;
If you have 2 equal properties they will get overwritten. Also note that it isn't necessary to give the 2 classes the same transition unless you want different transition between going active and inactive.
To avoid overriding use this. Because CSS will basically takes the lastly defined property.
.switch_Active {
background-color: $not_selected;
-webkit-transition: background-color 5000ms, margin-left 0.5s ease;
-moz-transition: background-color 5000ms, margin-left 0.5s ease;
-o-transition: background-color 5000ms, margin-left 0.5s ease;
transition: background-color 5000ms, margin-left 0.5s ease;
border-radius: 50%;
height: 20px;
margin-left: 45%;
width: 20px;
}
.switch {
background-color: $selected;
-webkit-transition: background-color 5000ms, margin-left 0.5s ease;;
-moz-transition: background-color 5000ms, margin-left 0.5s ease;;
-o-transition: background-color 5000ms, margin-left 0.5s ease;;
transition: background-color 5000ms, margin-left 0.5s ease;;
border-radius: 50%;
height: 20px;
margin-left: 50%;
width: 20px;
}
or simply them like this:
.switch_Active {
background-color: $not_selected;
-webkit-transition: background-color, margin-left 0.5s ease;
-moz-transition: background-color, margin-left 0.5s ease;
-o-transition: background-color, margin-left 0.5s ease;
transition: background-color, margin-left 0.5s ease;
border-radius: 50%;
height: 20px;
margin-left: 45%;
width: 20px;
}
.switch {
background-color: $selected;
-webkit-transition: background-color, margin-left 0.5s ease;;
-moz-transition: background-color, margin-left 0.5s ease;;
-o-transition: background-color, margin-left 0.5s ease;;
transition: background-color, margin-left 0.5s ease;;
border-radius: 50%;
height: 20px;
margin-left: 50%;
width: 20px;
}
I am using Montana template on Wordpress and I have no idea why my dropdown menu is hide behind the main slider...
Here is the link of the test environment: http://evolutionescaperooms.com/dev/
Even if I put ul tag to z-index : 99999 or position : absolute, still doesn't work... But if you close and reopen the menu, the dropdown will be above the slider, without any reason...
Anyone got a quick fix please?
Thanks
This is an overflow issue not a z-index issue. The .navigation div has overflow: hidden; in its css. This is cropping any child elements that overflow its boundaries.
When you open and close the navigation it toggles the overflow to overflow: initial via Javascript. Hence why it only works after the menu is opened and closed.
Original CSS:
.navigation {
position: relative;
display: table;
overflow: hidden; /* Preventing overflowing popup menu from showing */
width: 100%;
margin-top: 40px;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
Update to:
.navigation {
position: relative;
display: table;
width: 100%;
margin-top: 40px;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
I'm having a issue with a transition css property in a button tag.
When I hover the button I supposed it will go smoothly to width:auto, but it jump directly.
This is the code, what did I miss?
<button>Hello</button>
button {
padding: 10px;
width: 30px;
overflow:hidden;
transition: width 400ms ease-in-out;
-webkit-transition: width 400ms ease-in-out;
-moz-transition: width 400ms ease-in-out;
}
button:hover {
width: auto;
}
max-width is your friend
Demo
button {
padding: 10px;
width: auto;
max-width: 30px;
overflow:hidden;
transition: max-width 400ms ease-in-out;
-webkit-transition: max-width 400ms ease-in-out;
-moz-transition: max-width 400ms ease-in-out;
}
button:hover {
max-width: 100%;
}
Transition won't work with width: auto; you have to give a value in px, ems, percentage or whatever...
I am trying to do something very simple, a para has opacity set to 0, when hovered on parent div the para's opacity changes to 1, there is a change of text happening after the opacity changes, it's not exactly flickering, the text kinda self adjusts itself which is a bit odd.
Here's the fiddle:
http://jsfiddle.net/krish7878/7t6GM/
HTML Code:
<div class="para">
<p> SOME SAMPLE TEXT </p>
</div>
CSS Code:
.para{
width: 1000px;
border: 1px solid #000;
}
.para p{
font-family: Arial, sans-serif;
font-size: 80px;
opacity: 0;
}
.para:hover p{
opacity: 1;
transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
-ms-transition: all 400ms ease;
}
The solution is to change the backface-visibility property value to hidden.
The default value is visible.
Updated Example
.para p {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-family: Arial, sans-serif;
font-size: 80px;
opacity: 0;
}
The problem started when I needed to have a div set at 60% opacity and on hover it animates to 90% opacity.
The only catch is I need a full white (non transparent) PNG image on top of this box at all times.
So I tried the trick of overlaying a separate div containing the image and used the margins to bring it into position; BUT the background div animation hover over doesn't work when your mouse is on top of the image.
HTML
<div style="position:relative;top:-1px;left:0">
<div class="ontop"><img src="http://www.designdownloader.com/item/pngs/button01_google/button01_google-20110813210436-00005.png" alt="OneSpring - Play Video" /></div>
<div id="box-video">
</div>
</div>
</div>
CSS
#box-video {
position: absolute;
background-color:rgba(0,57,129,1);
top: 0;
left: 0;
padding: 15px;
font-family: 'Helvetica Neue Light', Arial, Helvetica, sans-serif;
width: 210px;
height: 130px;
opacity: 0.6;
filter: alpha(opacity=60);
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
#box-video:hover, .ontop:hover {
cursor: pointer;
/*color: #ffffff;*/
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
zoom: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
div.ontop {
position: relative;
top: 4.7em;
left:30px;
z-index:1002;
}
Here is a JSFiddle showing the problem:
http://jsfiddle.net/xpancom/fZrWA/
How can you make the background hover work even when you are on top of the image?
You could alternatively use :before or :after pseudo class.
It will clean up your code a lot.
This is what your HTML can look like:
<div style="position:relative;top:-1px;left:0">
<div id="box-video"></div>
</div>
Here is more on them, and here is the fiddle: http://jsfiddle.net/jyHMf/
See if that is what you were looking for.
I think you're talking about CSS pointer-events property. pointer-events | MDN
So your code might look like this:
div.ontop {
position: relative;
top: 4.7em;
left:30px;
z-index:1002;
pointer-events: none;
}
http://jsfiddle.net/8CZEY/
Put an id on the container:
<div id="box" style="position:relative;top:-1px;left:0">
Now put the hover event on the container instead, and let it affect the child element:
#box:hover {
cursor: pointer;
}
#box:hover #box-video {
opacity: 0.9;
filter: alpha(opacity=90);
zoom: 1;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-ms-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
}
Demo: http://jsfiddle.net/fZrWA/2/