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.
Related
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?
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/
Alright Google isn't helping me out much here.
The aim of the game is to have a button, which is a custom png, and upon mouse rollover it 'slides upwards', remaining in the same spot but transitioning to the rollover by means of sliding.
Preferably I'd like to get this sorted using CSS3, the page already has a bit of an OTT fest of JQuery.
Currently I've only managed to get it to slide from the left side. Downwards is fine too.
Code is about as simple as it comes, the HTML looks like this (Just a basic DIV):
<div id="Abutton"><a draggable="false" title="A button n' stuff"></a></div>
The CSS:
#Abutton a {
background: url(mediafolder/Abutton.png) no-repeat 0% 0px;
display: block;
height: 32px;
width: 86px;
cursor: pointer;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
#Abutton a:hover {
background-position: -86px 0%;
}
(Plus a further # for the positioning and size etc..)
If it makes for any complications the button is also tied to a JQuery file that upon clicking, smooth scrolls to a different point in the page (Props to the awesome chap that helped me out with that last night!).
Thanks in advance!
I think what you're asking is a slot machine display type feel?
Just use an image sprite, which you pretty much already are trying to do, and put a css animation on it, and it will look what you want (which i think is what you want?) Best of luck
.animate {
-webkit-transition: all 0.250s -in-out;
-moz-transition: all 0.250s ease-in-out;
-o-transition: all 0.250s ease-in-out;
transition: all 0.250s ease-in-out;
}
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 have implemented the nivo slider (with default theme) successfully except for one issue.
The left arrow on the slider is showing a small part of the right arrow. The right arrow on the other hand is being displayed correctly.
How come the left side of the sprite is not rendered properly but the right one is?
Arrow picture
The only place where the arrow.png picture is declared is in the next css section:
.theme-default .nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(../Images/slider/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
Thanks.
If you look right below that class in the nivo-slider css you will notice some classes called a.nivo-nextNav and a.nivo-prevNav which are applying a background position.
The left property on a.nivo-prevNav must be wrong for the distribution of the plugin you have. If you adjust that to say 11px (you will have to play with it, to get it just right) it will fix your problem.