I am trying to move an HTML element up about 10px whenever a user hovers their mouse over it. I did some research on w3schools, but I could not find any information that helped me. Most of their animation examples were using keyframes and I'm pretty sure that's not what I need because I'm trying to trigger an animation when somebody hovers over the element. I could be wrong though and that's why I'm posting here.
Here's the element I'm trying to move:
<div id="arrow">
<i class="fa fa-arrow-down fa-2x"></i>
</div>
For my CSS:
#arrow {
padding-top: 310px;
color: #5C6B7E;
position: relative;
/* some kind of animation property here? */
}
#arrow:hover {
/* new properties once user hovers */
}
I'm not sure what I need to add to make the element animate up, the examples on w3schools weren't of much help. If anybody could point me in the right direction I would be extremely appreciative. Thank you Stack Overflow.
You need not use keyframes for this simple animation. Just CSS transition is enough.
Set the transition property in the initial state style rules with the duration.
Edit: I just noticed that there is a flicker at the bottom, it can be removed by setting the styles on the icon and hover on the parent.
#arrow i {
position: relative;
top: 0;
transition: top ease 0.5s;
}
#arrow:hover i {
top: -10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="arrow">
<i class="fa fa-arrow-down fa-2x"></i>
</div>
You could also try applying a negative margin-top on hover if your element is absolutely positioned:
div {
padding: 1em;
border: 1px solid #b5b5b5;
border-radius: 10px;
width: fit-content;
transition: 0.5s;
}
div:hover {
box-shadow: 0 0 3px black;
margin-top: -10px;
}
<br/>
<div>
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1">
</div>
I came across this while trying to solve an issue I had with getting an element to move when hovering over it with my mouse. None of the above worked, so I thought I'd share the solution I came up with on a test I ran:
.item {
background-color: black;
display: flex;
width: 100px;
height: 40px;
align-items: center;
justify-content: center;
text-align: center;
color: white;
transition: transform ease 300ms;
}
.item:hover {
transform: translate(0, -10px);
}
<div class="item">TEST</div>
Related
I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!
I've tried googling this and youtube with no luck.
I have tried adding
transition
transition-delay
body{
background-color: black;
}
.column{
position: fixed;
left:0;
bottom:0;
top:55px;
width:72px;
z-index: 200;
padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}
.about:hover span {
display: none;
}
.about:hover:after {
transition-delay: 3s;
content: "ABOUT";
}
.skills:hover span {
display: none
}
.skills:hover:after {
content: "SKILLS"
}
<h1>
<div class="column">
<button class="about" data-hover="ABOUT">
<span>
I
</span>
</button>
<button class="skills">
<span>
AM
</span>
</button>
</div>
</h1>
First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.
The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.
I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.
/* Lets give our spans some styling: */
span{
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
margin-bottom: 2rem;
max-width: 60ch;
}
/* Lets make the "container" position relative,
this way the absolute children will stay inside the container */
.hover-effect{
position: relative;
}
/* Let's give both of the children position absolute */
.hover-effect span{
position: absolute;
color: black;
opacity: 100%;
transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}
/* Let’s override the previous.
This actually happens when we remove the hover, so we want to
trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
opacity: 0%;
transition: 300ms ease-in 0ms;
}
/* When we hover the container, let's change both spans */
.hover-effect:hover span{
color: red;
opacity: 0%;
transition-delay: 0ms;
}
/* Let’s override the previous.
When we hover on the container, the span with the class "on-hover"
becomes visible, and we wait 300ms before it happens so that the
"disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
opacity: 100%;
transition-delay: 300ms;
}
<div class="hover-effect">
<span>Try and hover over me</span>
<span class="on-hover">Try and remove the hover</span>
</div>
I'm trying to add a cool little opacity transition for my extension. I've looked up many ways to go about this, and nothing has seemed to work so far. Is this even possible? I have the latest version of Chrome.
A preview of it not working
CSS:
.container .primary:after {
opacity: 0;
transition: opacity 6s ease-out;
}
.container .primary:hover:after {
opacity: 1;
content: "Go through a list of friends to remove";
position: absolute;
top: 100%;
width: 100vw;
height: 20px;
margin: 10px;
font-size: 13px;
}
It's hard to reproduce from your code but there's a few main problems:
Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.
It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.
You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.
And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:
.container {
position: relative;
padding:10px;
font-family:'Arial';
border:1px solid black;
}
.container .tooltip {
opacity: 0;
transition: opacity 0.4s ease-out;
position: absolute;
top: 100%;
left: 0;
height: 20px;
padding:10px;
font-size: 13px;
}
.container .primary:hover .tooltip {
opacity: 1;
}
<div class="container">
<div class="primary">div
<div class="tooltip">"Go through a list of friends to remove"</div>
</div>
</div>
I've noticed an unanticipated effect of using CSS color transitions on an image with a transparent background. Here's an example:
:root {
--size: 4em;
--duration: 5s;
}
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu *:hover {
background: skyblue;
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image-div {
float: right;
padding: calc(var(--size) / 2);
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image {
max-width: var(--size);
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
To summarize, the issue is this. If you hover over the image-div div's padding, the background color of this div and the contained image div execute the color transition at the same rate, as expected. However, if you hover over the image div, its color appears to transition slightly faster than the image-div div's color.
Given the fact that I was able to reproduce this exact behavior on Firefox, Chrome, Safari and Edge, I get the feeling that this is expected behavior, but I would like to understand why it is happening.
When you hover over the img two hover events are triggered - one on the img and one on its parent image-div when you use * in .main-menu *:hover selector:
Instead use the hover only on the image-div as below:
.main-menu .image-div:hover {
background: skyblue;
}
and now the difference in transition will not be there - see demo below:
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu .image-div:hover {
background: skyblue;
}
.image-div {
float: right;
padding: calc(4em / 2);
-webkit-transition-duration: 5s;
transition-duration: 5s;
}
.image {
max-width: 4em;
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
Given the fact that I was able to reproduce this exact behavior on
Firefox, Chrome, Safari and Edge, I get the feeling that this is
expected behavior, but I would like to understand why it is happening.
The reason this happens is because the img transition picks up the image-div transitioned color, hence get lighter faster.
Simply put, the image-div goes from a solid black, while the img goes from black that turns into sky blue.
Additionally, since you move the mouse over the image-div before it gets to the img, the transition starts before, though the delay is based on how fast you move the mouse to the img
I've got a simple input toggle that reveals text when 'toggled'.
Codepen
HTML
<div class="window">
<input type="checkbox" id="punch" class="toggle">
<label for="punch">
<img class="arrow" src="http://45.79.67.59/moreinfo_arrow.png">
</label>
<div>
<h3>codepen.io</h3>
</div>
</div>
CSS
div.window {
color: #000;
width: 100%;
background: #fff;
margin: 0px;
font-family: Arial Black, sans-serif;
font-size: 20px;
}
div.window label{
display: block;
width: 1%;
transition: all 0.75s 0.25s;
transform: rotate(0);
}
input.toggle ~ div {
height: 0px; margin: .1rem;
overflow: hidden;
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 60px; }
input.toggle:checked + label { transform: rotate(180deg); }
input.toggle { display: none; }
When the toggle <img> is 'checked', I'd like it to rotate 180˚, however, I've had trouble making the image rotate on it's center axis. It currently rotates on it's edge: good for eliciting a chuckle... not so good for potential users.
Any help is very much appreciated!
Problem
The origin of your transformation is not the center of the image. So it rotates about the wrong reference point. See the following picture:
This picture is showing the result of rotating a square using transform: rotate(45deg) with different transform-origin values.
Solution
Normally just add transform-origin: center center; to the transform property (but to be honest, that's also the default value).
So your actual problem is that you specified the transition on the parent (of the image) what means it will take the center of the parent. Since you specified the width as 1% the center isn't the same as the center of the image. So to solve this I've felt free to change this to the width of the image (what is in this case width:200px;).
Alternatively you could specify the origin manually with absolute values (in your case transform-origin:100px 100px;).
See JSFiddle.
I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.
It's like it moves back, then forwards then back again?
This appears to only happen in Firefox.
JSFiddle
Found the problem. Your span is inline, and giving it position: relative caused the issue.
Simply change to inline-block and you're good to go:
.genericBtn span {
display: inline-block;
position: relative;
}
How about using a more subtle approach by using CSS pseudo elements:
.genericBtn {
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 30px;
width: 300px;
position: relative;}
.genericBtn::after {
content: ">";
position: absolute;
right: 37%;
transition: all .3s ease-in;
}
.genericBtn:hover::after {
transform: translate(10px,0); }
Here is a Fiddle