On my site Im using a CSS3 hover fade for my submit button. It correctly fades on hover, but when I remove the curser from the button it quickly changes back to the original color, it doesn't seem to be doing the 1 second fade back out.
.form-wrapper input[type=submit] {background-color:#0076A9}
.form-wrapper input[type=submit]:hover{
background-color:#7daed3;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease}
UPDATE:
.social-links {
color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;}
.social-links:hover {
color:#7daed3;}
You need to use ease-in-out. See: http://css3generator.com/
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
For the transition to effect ALL the properties, use (for social links):
.social-links a{
display: inline-block;
width: 43px;
height: 43px;
margin: 0 10px 10px 0;
color: #0076a9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Set the -webkit-transition-duration:1s; to the input without the hover in your css, like so:
.form-wrapper input[type=submit] {
background-color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;
}
.form-wrapper input[type=submit]:hover {
background-color:#7daed3;
}
Live example: http://jsfiddle.net/YgWYh/
Related
I'm trying to get an image within a table cell to have a filter applied to it when you hover over the table cell. I'm not sure if there's a way to this with just CSS.
[EDIT]
table.flip td:hover {
background-color: #510000;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
table.flip td:hover img {
-webkit-filter: brightness(400%);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
The above is working now other than the fact that mousing out doesn't apply the transition effect again. Mousing in has it fade in, but mousing out has it just blink back to the original state. The above code works on all other images I'm applying this filter to on the site (in terms of a transition in and out).
Is it because it's a table? The table is also within a frame, but the other filtered images are as well. Not sure why it won't transition back.
Regarding your transition question - have a look at:
http://learn.shayhowe.com/advanced-html-css/transitions-animations
The color transition works like a charm.
EDIT:
Ok now I see your problem:
The transition needs to bee applied to the element itself but not to the hover state.
table.flip td {
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
table.flip td:hover {
background-color: #510000;
}
table.flip td img {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
table.flip td:hover img {
-webkit-filter: brightness(400%);
}
Here is the fiddle:
http://jsfiddle.net/ULHb4/
I have have an image which its background color changes when hover.
It takes 1 second to change the colour, but as soon as the courser moves out of the image it changes back without any effect.
How can I have an effect for to fade out the background colour?
CSS:
.latestTrack {
margin:80px 0 0 0 !important;
}
.latestTrack img {
float:right;
margin-right:50px !important;
}
.latestTrack img:hover
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
background-color:#f7710f;
}
HTML:
<img src="img/SocIco/soundcloud-large.png" />
You forgot the easing out part:
.latestTrack img {
float:right;
margin-right:50px !important;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
jsFiddle example here.
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/
Is it possible to have a css transition that fades an element in on hover but simply hides the element when the mouse leaves.
i.e. hover in = fade for 0.5 seconds | hover out = no fade and instant
Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:
#myLink {
opacity: 0;
}
#myLink:hover {
opacity: 1;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
And here's a jsFiddle to demonstrate: Fiddle
Yes, just set the transition on the :hover rather than the link - http://jsfiddle.net/spacebeers/X4ZqE/
(in the Fiddle, the link is in the top left of the "result" box)
#main-menu li a {
opacity: 0;
}
#main-menu li a:hover{
opacity: 1;
transition: opacity 0.5s ease-in; /* vendorless fallback */
-o-transition: opacity 0.5s ease-in; /* opera */
-ms-transition: opacity 0.5s ease-in; /* IE 10 betas, not needed in final build. */
-moz-transition: opacity 0.5s ease-in; /* Firefox */
-webkit-transition: opacity 0.5s ease-in; /*safari and chrome */
}