Well, I have set up an animation when someone hovers over a button, and when they do so, the background color, border radius and the font color change. When I hover over it, there is a smooth animation, however when I stop hovering, there is a very sharp animation.
Code:
.button {
text-align:center;
background:#ccc;
display:inline-block;
position:relative;
text-transform:uppercase;
margin:25px;
border:solid #B26B24;
background:none;
color:#fff;
border-top-left-radius:17px;
border-top-right-radius:17px;
border-bottom-left-radius:17px;
border-bottom-right-radius:17px;
-moz-border-radius-topleft:17px;
-moz-border-radius-topright:17px;
-moz-border-radius-bottomleft:17px;
-moz-border-radius-bottomright:17px;
-webkit-border-top-left-radius:17px;
-webkit-border-top-right-radius:17px;
-webkit-border-bottom-left-radius:17px;
-webkit-border-bottom-right-radius:17px;
}
.button:hover {
background-color:#ffffff;
color:#161616;
font-size:18px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
}
.button-text {
padding:0 25px;
line-height:56px;
letter-spacing:3px;
}
Working example:
http://codepen.io/Riggster/pen/eNppgJ
Does anyone know how I stop this sharp animation from happening?
I have looked on stack overflow and the internet however all I can find is people having this issue, but with javascript or JQuery.
Thanks.
You need to set the transition declaration on the element you want to animate. Right now it is only on :hover, so the animation only occurs when hovering.
.button {
transition: 0.75s;
-webkit-transition: 0.75s;
-ms-transition: 0.75s;
/* etc. */
}
.button:hover {
/* no transition declaration */
background-color: #ffffff;
color: #161616;
font-size: 18px;
border-top-left-radius: 75px;
border-top-right-radius: 75px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 75px;
}
Updated Codepen
I am having trouble with my navbar, and been stuck at this for some hours now.
My navbar looks like this:
<div id="pages">
<?php wp_nav_menu();?>
</div>
Very simple wordpress navbar. Wordpress gives every page on this menu automaticly a class name like .page-item-30 also wordpress gives them all the class .page-item.
What I want to achieve is so when i hover 1 Page the background turns red (#ff0000) and the font-color turns white; My css looks like this
#pages li{
display: inline;
float: left;
height: 20px;
padding: 5px;
margin: 0px;
margin-top: -17px;
transition: all 0.2s ease-in-out;
}
#pages li:hover{
background-color: #ff0000;
}
/**
.page-item-27:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-2:hover a{
color: white;
transition: all 0.2s ease-in-out;
}
.page-item-21:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
**/
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
.current_page_item {
background-color: #ff0000;
}
.current_page_item a{
color: white;
}
Now i tried using .page-item-27 or so do define when the font-color has to change but that is very unreliable since it relies on the right ID of the page. So If i have a new page with a ID not in my CSS my navigation doesnt work right.
Is there a way of changing the color of the font?
In my current css there is this
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
which in my Mind should work, but it doesn't.
If you don't understand it completly under danielps1.de you can check out my live-page. Just hover my navigation on the left
Thanks for the help
I think your problem is just a little mistake.
Your CSS selector should be:
.page_item a:hover{
color: white;
transition: all 0.2s ease-in-out;
}
Instead of:
.page-item:hover a {
color: white;
transition: all 0.2s ease-in-out;
}
Hope I could help.
Try using
li.page_item a:hover {
color: white;
}
as the CSS selector!
Is there a way to ease-in-out between 2 border thicknesses?
My code:
nav a {
border-bottom: 1px solid #AADA4B;
}
nav a:hover {
border-bottom: 3px solid #AADA4B;
}
Thanks very much for the help.
Sam.
Sure, just transition border or border-width on the a element:
nav a {
/* -moz-, -o-, -webkit- prefixes omitted for brevity */
transition: border-width 0.1s ease-in-out;
border-bottom: 1px solid #AADA4B;
}
I am trying to tint images onHover. I have the css working but some of the images which have rounded edges or don't completely fill the parent show the black background:
(The far left has the mouse over it)
How can hide the black so only the img is tinted?
Here is my css:
.thumb {
width:150px;
height:150px;
margin: 0px 5px 14px 14px;
float:left;
display:inline;
background: black;
overflow:hidden;
cursor: pointer;
/*border: 2px solid #00A3C6; */
}
.thumb img {
display: block;
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.thumb:hover img {
opacity: 0.7;
}
If the image has rounded corners, you can use border-radius in your css to set rounded corners of the "tint" container.
If the actual image has a white border... you're kind of out of luck. You can crop images but you don't have any way to doing this dynamically for any kind of image.
How can hide the black so only the img is tinted?
Try removing background: black from .thumb ?
P.S. display: inline is also not needed there
Is there any way to do the opposite of :hover using only CSS? As in: if :hover is on Mouse Enter, is there a CSS equivalent to on Mouse Leave?
Example:
I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from #999 to black. How can I create the opposite effect when the mouse leaves the item area, with an animation from black to #999?
jsFiddle
(Have in mind that I do not wish to answer only this example, but the entire "opposite of :hover" issue.)
If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:
ul li a {
color:#999;
transition: color 0.5s linear; /* vendorless fallback */
-o-transition: color 0.5s linear; /* opera */
-ms-transition: color 0.5s linear; /* IE 10 */
-moz-transition: color 0.5s linear; /* Firefox */
-webkit-transition: color 0.5s linear; /*safari and chrome */
}
ul li a:hover {
color:black;
cursor: pointer;
}
http://jsfiddle.net/spacebeers/sELKu/3/
The definition of hover is:
The :hover selector is used to select elements when you mouse over
them.
By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/
#thing {
padding: 10px;
border-radius: 5px;
/* HOVER OFF */
-webkit-transition: padding 2s;
}
#thing:hover {
padding: 20px;
border-radius: 15px;
/* HOVER ON */
-webkit-transition: border-radius 2s;
}
The opposite is using :not
e.g.
selection:not(:hover) { rules }
Just use CSS transitions instead of animations.
A {
color: #999;
transition: color 1s ease-in-out;
}
A:hover {
color: #000;
}
Live demo
Put your duration time in the non-hover selection:
li a {
background-color: #111;
transition:1s;
}
li a:hover {
padding:19px;
}
Just add a transition to the element you are messing with. Be aware that there could be some effects when the page loads. Like if you made a border radius change, you will see it when the dom loads.
.element {
width: 100px;
transition: all ease-in-out 0.5s;
}
.element:hover {
width: 200px;
transition: all ease-in-out 0.5s;
}
No there is no explicit property for mouse leave in CSS.
You could use :hover on all the other elements except the item in question to achieve this effect. But Im not sure how practical that would be.
I think you have to look at a JS / jQuery solution.
Another way of using transition is just specifying the milliseconds like so: transition: 500ms;
Try the following snippet
div{
background: DeepSkyBlue;
width:150px;
height:100px;
transition: 500ms;
}
div:hover{
opacity: 0.5;
cursor:pointer;
}
<div>HOVER ME</div>
You can use CSS3 transition
Some good links:
http://css-tricks.com/different-transitions-for-hover-on-hover-off/
http://www.alistapart.com/articles/understanding-css3-transitions/
Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a "transition" property and that is all you need
ul li {
display: inline;
margin-left: 20px;
}
ul li a {
color: #999;
transition: 1s;
-webkit-animation: item-hover-off 1s;
-moz-animation: item-hover-off 1s;
animation: item-hover-off 1s;
}
ul li a:hover {
color: black;
cursor: pointer;
-webkit-animation: item-hover 1s;
-moz-animation: item-hover 1s;
animation: item-hover 1s;
}
#keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-moz-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#-webkit-keyframes item-hover {
from {
color: #999;
}
to {
color: black;
}
}
#keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-moz-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
#-webkit-keyframes item-hover-off {
from {
color: black;
}
to {
color: #999;
}
}
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contacts</a></li>
</ul>
Although answers here are sufficient, I really think W3Schools example on this issue is very straightforward (it cleared up the confusion (for me) right away).
Use the :hover selector to change the style of a button when you move
the mouse over it.
Tip: Use the transition-duration property to determine the speed of
the "hover" effect:
Example
.button {
-webkit-transition-duration: 0.4s; /* Safari & Chrome */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
In summary, for transitions where you want the "enter" and "exit" animations to be the same, you need to employ transitions on the main selector .button rather than the hover selector .button:hover. For transitions where you want the "enter" and "exit" animations to be different, you will need specify different main selector and hover selector transitions.
You have misunderstood :hover; it says the mouse is over an item, rather than the mouse has just entered the item.
You could add animation to the selector without :hover to achieve the effect you want.
Transitions is a better option: http://jsfiddle.net/Cvx96/
The opposite of :hover appears to be :link.
(edit: not technically an opposite because there are 4 selectors :link, :visited, :hover and :active. Five if you include :focus.)
For example when defining a rule .button:hover{ text-decoration:none } to remove the underline on a button, the underline shows up when you roll off the button in some browsers. I've fixed this with .button:hover, .button:link{ text-decoration:none }
This of course only works for elements that are actually links (have href attribute)
This will add background color to the .icon when hovered and background fades when mouse pointer left the element..
.icon {
transition: background-color 0.5s ease-in-out; /* this is important */
}
.icon:hover {
background-color: rgba(169, 169, 169, 0.9);
}