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 */
}
Related
I have created hover transition image with css. But when i hover over the first or secont image then other images pixel is changing in an instant. What is that and what is the solution for it ?
I have created this DEMO from codepen
This is transition css for my images :
.abo_im {
float:left;
width:170px;
height:150px;
overflow:hidden;
-webkit-transition: all .3s ;
-moz-transition: all .3s ;
-ms-transition: all .3s ;
-o-transition: all .3s ;
transition: all .3s ;
}
.abo_im img {
width:100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
}
.abo_im:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Use backface-visibility on the img, this will fix it.
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
Demo Here
Just add -webkit-backface-visibility: hidden; to your .abo_im img
.abo_im img {
width: 100%;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
-webkit-backface-visibility: hidden;
}
See it here
I want to add a simple blend-in image transition for mouse hover.
The hover itself works fine.
If I remove the display:none , the transition will work, but the hover image swap will fall apart. Any ideas how to fix that ?
Here is the CSS that I used:
div.effect img.image{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:block;
}
div:hover.effect img.image{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div.effect img.hover{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div:hover.effect img.hover{
display:block;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
And here is the live (not working) demo to play with: http://jsfiddle.net/46AKc/65/
Assuming all the images are the same height, you could set a fixed height on the parent element and then relatively position it.
.effect {
position:relative;
height:94px;
}
Absolutely positioning the img elements and remove display:none.
div.effect img.image {
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position:absolute;
}
The reason this works is because the child img elements are absolutely positioned relative to the parents, effectively positioning both images on top of each other. You no longer need to change the display of the element, thus allowing the transition to take place.
UPDATED EXAMPLE HERE
Alternatively, if the images aren't all the same height, omit the height, but still relatively position the parent element. As opposed to absolutely positioning both images, just position one and it will still work.
ALTERNATIVE EXAMPLE HERE
div.effect img.hover {
opacity: 0;
position:absolute;
top:0;
}
It's also worth noting that you don't need to include the transition properties on all the elements if they have the same values. Having it on the div.effect img.image will suffice.
Take a look at this example.
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/
I've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes.
Here's the relevant CSS:
#myelem {
opacity: 0;
display: none;
transition: opacity 0.4s ease-in, display 0.4s step-end;
-ms-transition: opacity 0.4s ease-in, display 0.4s step-end;
-moz-transition: opacity 0.4s ease-in, display 0.4s step-end;
-webkit-transition: opacity 0.4s ease-in, display 0.4s step-end;
}
#myelem.show {
display: block;
opacity: 1;
transition: opacity 0.4s ease-out, display 0.4s step-start;
-ms-transition: opacity 0.4s ease-out, display 0.4s step-start;
-moz-transition: opacity 0.4s ease-out, display 0.4s step-start;
-webkit-transition: opacity 0.4s ease-out, display 0.4s step-start;
}
The JavaScript to trigger the change is:
document.getElementById('myelem').className = "show";
But the transition doesn't seem to be happening - it's just jumping from one state to the other.
What am I doing wrong?
It does work when you remove the display properties.
#myelem {
opacity: 0;
transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-webkit-transition: opacity 0.4s ease-in;
}
#myelem.show {
opacity: 1;
transition: opacity 0.4s ease-out;
-ms-transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
}
JSFiddle.
The reason for this is that only CSS properties with numbers can be transitioned. What do you think the "50% state" should be between "display: none;" and "display: block;"? Since that can't be calculated, you can't animate the display property.
You cannot use the display property for transitioning between states.
The answer provided by #MarcoK including the comments shows already the right direction. Setting display property hinders transition.
A better practice is though to put the unprefixed (standards) version after the browser-vendor prefixed ones, in order to be future-proof. The latter properties overwrite the former.
Other improvements:
As #Charmander pointed out, -ms-transition isn't supported by any Internet Explorer
There's also Opera's vendor prefixed -o-transition for Op 10.5-12 & Op Mobile 10-12, which currently is probably supported by less than .1% of global browser. I'll put it in for completion
CSS:
#myelem {
opacity: 0;
-webkit-transition: opacity .4s ease-in;
-moz-transition: opacity .4s ease-in;
-o-transition: opacity .4s ease-in;
transition: opacity .4s ease-in;
}
#myelem.show {
opacity: 1;
-webkit-transition: opacity .4s ease-out;
-moz-transition: opacity .4s ease-out;
-o-transition: opacity .4s ease-out;
transition: opacity .4s ease-out;
}
It is possible to animate show and hide elements in css, just instead of:
display: none;
/* and */
display: block;
use:
overflow: hidden;
max-height: 0;
/* and */
max-height: 9999999px;
Since you replace this properties, you are able to animate any css value with transition.
working example:
https://jsfiddle.net/utyja8qx/
I've encountered a problem with CSS transitions. I'm designing a CSS gallery for my portfolio and I need my images to fade in on hover.
I've been playing around with this for over an hour and I was hoping someone could point me into the right direction.
Here is a simplified version to it with JSFiddle
I recommend you to use an unordered list for your image gallery.
You should use my code unless you want the image to gain instantly 50% opacity after you hover out. You will have a smoother transition.
#photos li {
opacity: .5;
transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-webkit-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
#photos li:hover {
opacity: 1;
}
This will do the trick
.gallery-item
{
opacity:1;
}
.gallery-item:hover
{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}