I have a simple code with CSS transition and image hover effect.
Codepen Demo
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease;
visibility:hidden;
overflow:hidden;
Could you please explain to me:
Why this part causes left to right animation? (apparently "all" property)
transition: all 0.2s ease;
How can I change it to make a simple fade instead of left/right move? Do I have to use jQuery for it?
Thanks
Kris
Change your CSS to the following:
.item .overlay {
position: absolute;
left: 0%;
top:0;
width: 0%;
height: 100%;
opacity:0;
background-color: rgba(0, 0, 0, 0.22);
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
overflow:hidden;
}
And on hover
.item:hover .overlay {
top: 0;
left: 0;
visibility: visible;
width: 100%;
height: 100%;
opacity: 1;
}
Updated codepen demo
the left to right is because the position of
.item:hover .overlay and .item .overlay are both 'left: 0;' if you change both to 'right: 0;' you get the animation from right to left
no Jquery is required for a fade effect, you could just add two css properties (opacity) opacity 0 on the .item .overlay and opacity 1 on the .item:hover .overlay
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 was practicing css on an example i found. I tried to show the submenu above the nav with transition effects. I can change the position of the submenu on hover :
nav li:hover .menu-sub {
display: block;
transform: translateY(-100%);
}
I also modified the code to add a transition effect:
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
display: none;
color: #fff;
padding: 2em;
-webkit-transition: -webkit-transform 1.5s ease;
-moz-transition: -moz-transform 1.5s ease;
-o-transition: -o-transform 1.5s ease;
transition: transform 1.5s ease;
}
The position changed but I don't see any transition effect at all. What am i doing wrong ?
Please modify the transition to shown below, it was written wrong.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
opacity:0;
overflow:hidden;
box-sizing:border-box;
height:0px;
color: #fff;
-webkit-transition: opacity 1.5s ease-out;
-moz-transition: opacity 1.5s ease-out;
-o-transition: opacity 1.5s ease-out;
transition: opacity 1.5s ease-out;
}
Transition does not work with display, instead use the below effect.
Codepen Demo
Where we can toggle the height from 0px to auto(full height) and opacity from 0(invisible) to 1(visible). You can see that we only see the animation on opacity, this will produce the best effect.
Use visibility:hidden then visible
display: none disables it in the active DOM and such elements with this CSS can't be selected for stuffs like animations.
.menu-sub {
position: absolute;
left: 0;
background: #444;
width: 100%;
visibility: hidden;
color: #fff;
padding: 2em;
transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
visibility: visible;
transform: translateY(-100%);
}
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/
I've got a <span> with some text in it and when you hover over it an image comes sliding down the page. So far so good. However, when your mouse accidentally hovers over the image, the animation will be stopped. I do not want that.
.coffee {
-webkit-transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-o-transition: color 0.2s linear;
-ms-transition: color 0.2s linear;
transition: color 0.2s linear;
z-index: 10;
}
.coffee:hover {
color: #B88A00;
}
.coffee img {
position: absolute;
display: block;
height: 100px;
width: 100px;
z-index: 1;
left: 280px;
top: 50px;
opacity: 0;
-webkit-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-moz-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-o-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
-ms-transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
transition: top 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.coffee:hover img {
top: 150px;
opacity: 1;
}
Any help would be much appreciated.
As per i understand may be that's you want. Write like this:
HTML
<span class="coffee"><u>coffee</u></span>!
<img src="image.jpg" alt="Coffee!"/>
CSS
.coffee:hover + img{
top: 150px;
opacity: 1;
}
Check this http://jsfiddle.net/quLKb/2/
You can use the pointer-events attribute. If you set it to none, mouse events are omitted on elements with that css-rule applied.
.coffee img {
pointer-events: none;
}
Here's the modified example: http://jsfiddle.net/kFd9g/
Original Question... updated working code below:
I have a loading image which comes up during an ajax load event. The image shows/hides by adding or removing a "loading" class to the body element. Currently, the loading image animates background-size from 0 to 100%, and fades in the opacity (vice versa for the 'return' transition).
What I want to accomplish, though, is to have the background-size transition happen instantly (not transition) on the fade out, so:
Fade in: opacity from 0 to 1 in .2s, background size from 0 to 100% in .2s
Fade out: opacity from 1 to 0 in .2s, background size from 100% to 0 should happen instantly
#loader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-moz-opacity: 0;
transition: all .2s ease-in-out
}
#loader .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
transition: all .2s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
.loading #loader .image {
background-size: 100% 100%;
margin: -69px 0 0 -200px;
transition: opacity .2s ease-in-out
}
I've changed transition property for this selector .loading #loader .image to "opacity" rather than "all", but it still performs the background-size transition.
Does anyone know how to achieve the different fade in and fade out transitions described above with css3? Thanks!
Updated Working Code
The issue was breaking out the individual properties (margin, background) into a comma separated list. I believe using transition: all will prevent you from being able to do different IN and OUT transitions.
#loader {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-moz-opacity: 0;
.transition(opacity,.4s);
}
#loader .image {
width: 400px;
height: 138px;
display: block;
position: absolute;
z-index: 2000;
top: 50%;
left: 50%;
margin: 0;
background: url(assets/images/loading.png) no-repeat;
background-size: 0 0;
-webkit-transition: margin .4s ease-in-out;
-moz-transition: margin .4s ease-in-out;
-o-transition: margin .4s ease-in-out;
-ms-transition: margin .4s ease-in-out;
transition: margin .4s ease-in-out;
-webkit-animation: pulse 400ms ease-out infinite alternate;
-moz-animation: pulse 400ms ease-out infinite alternate;
-o-animation: pulse 400ms ease-out infinite alternate;
animation: pulse 400ms ease-out infinite alternate
}
.loading #loader {z-index: 1000; background-color: rgba(255,255,255,.7)}
.loading #loader .image {
background-size: 100% 100%;
margin: -69px 0 0 -200px;
-webkit-transition: background .4s ease-in-out, margin .4s ease-in-out;
-moz-transition: background .4s ease-in-out, margin .4s ease-in-out;
-o-transition: background .4s ease-in-out, margin .4s ease-in-out;
-ms-transition: background .4s ease-in-out, margin .4s ease-in-out;
transition: background .4s ease-in-out, margin .4s ease-in-out;
}
Here is a simplified test case:
div {
background: blue;
opacity: 0;
transition: opacity 2s ease-in-out;
}
div.loading {
opacity: 1;
background: red;
transition: opacity 2s ease-in-out, background 1s ease-in;
}
Notice how the opacity fades the same in and out, but the background only fades in, and immediately turns blue on fade out.
I used :hover as an example, but it should work the same when adding and removing classes with JavaScript.
Demo
If you'd like a more specific example please provide a reduced test case on dabblet or Jsfiddle.