What's wrong with this animation?
.homepage-box:hover .shadow-layer
{
opacity:0.70;
-webkit-animation: opacity 5s;
-moz-animation: opacity 5s;
}
in both chrome/firefox I can't see the fade in opacity...
You need to set the transition on the parent property as is (so not on :hover).
.homepage-box .shadow-layer {
opacity: 1;
transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-webkit-transition: opacity 5s ease-in-out;
}
.homepage-box:hover .shadow-layer {
opacity: 0.7;
}
Change into transition not animation
Maybe this is what you want I guessed JS Fiddle
Related
I'm quite a noob when it comes to CSS and HTML stuff, but I have been able to tweak our Wordpress website quite well so far.... as long as nothing too technical is needed.
I have this code for images to fade on hover which I copied from another answered question:
img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
What I want is for this fade hover effect to work only on images with links. Right now it affects all my images, even those with no links.
I tried doing
a.img {
opacity: 1.0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
a.img:hover {
opacity: 0.8;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}
but it did not work at all.
Any simple way to fix this?
Instead of using a.img please use a > img
So in your code
a > img{
//... your code
}
a > img:hover{
//... your code
}
The image is a child of the link, so your CSS selectors need to be a img {...} and a img:hover {...} - with a space between the two. Also a > img {...} and a > img:hover {...} is possible (which requires it to be a direct child).
So i have this image and i want to increase the saturation of it when hoovering.
This is the class of the image:
.trans {
-webkit-filter: saturate(70%);
-webkit-transition: saturate 2s ease;
-moz-transition: saturate 2s ease;
-o-transition: saturate 2s ease;
-ms-transition: saturate 2s ease;
transition: saturate 2s ease;
}
.trans:hover {
-webkit-filter: saturate(190%);
}
The hoover is working and the saturation is increased, but the transition is instant and doesn't take the 2 seconds (or other value that i put). I've noticed that in this website i tried another hover effect (blur an image) and i have the same problem.
What can i do?
I believe you need to use "filter" or "-webkit-filter" as the target of the transition, e.g.
.trans {
-webkit-transition: -webkit-filter 2s ease;
transition: -webkit-filter 2s ease;
}
Transition should work only width and height only
logo-small {
top:0 ;
width:198px;
height:198px;
position:absolute;
-webkit-transition: all 2s ease-in-out 0s;
-moz-transition: all 2s ease-in-out 0s;
transition: all 2s ease-in-out 0s;
}
logo-small:hover {
top:100px ;
width:298px;
height:298px;
}
Any idea's?
You've specified the transition should affect all properties. try
#logo-small:hover {
transition-property: width, height;
top:100px ;
width:298px;
height:298px;
}
or
#logo-small {
top:0 ;
width:198px;
height:198px;
position:absolute;
-webkit-transition: height 2s ease-in-out 0s, width 2s ease-in-out 0s;
-moz-transition: height 2s ease-in-out 0s, width 2s ease-in-out 0s;
transition: height 2s ease-in-out 0s, width 2s ease-in-out 0s;
}
edit: added back old answer, fixed
I hope you are getting this bug on Moz Firefox only:
Here is the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=821976
create different css class for adding effect and apply this class on hover by javascript
.newClass {
top:100px ;
width:298px;
height:298px;
}
$('.logo-small').on('hover', function(){
$(this).addClass('newClass');
});
And don't forget to remove on mouse out.
.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse?
Demo here: https://jsfiddle.net/7uR8z/
You're applying transitions only to the :hover pseudo-class, and not to the element itself.
.item {
height:200px;
width:200px;
background:red;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.item:hover {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Demo: https://jsfiddle.net/7uR8z/6/
If you don't want the transition to affect the mouse-over event, but only mouse-out, you can turn transitions off for the :hover state :
.item:hover {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
Demo: https://jsfiddle.net/7uR8z/3/
I managed to find a solution using css/jQuery that I'm comfortable with. The original issue: I had to force the visibility to be shown while animating as I have elements hanging outside the area. Doing so, made large blocks of text now hang outside the content area during animation as well.
The solution was to start the main text elements with an opacity of 0 and use addClass to inject and transition to an opacity of 1. Then removeClass when clicked on again.
I'm sure there's an all jQquery way to do this. I'm just not the guy to do it. :)
So in it's most basic form...
.slideDown().addClass("load");
.slideUp().removeClass("load");
Thanks for the help everyone.
$(window).scroll(function() {
$('.logo_container, .slogan').css({
"opacity" : ".1",
"transition" : "opacity .8s ease-in-out"
});
});
Check the fiddle: https://jsfiddle.net/2k3hfwo0/2/
I'm using this for my link-hover-transition-effect:
-webkit-transition: color 250ms ease-in 0;
-moz-transition: color 250ms ease-in 0;
-o-transition: color 250ms ease-in 0;
transition: color 250ms ease-in 0;
It works in Opera, Chrome but not in Firefox. I don't care about IE.
According to this, it should work: https://developer.mozilla.org/en/CSS/CSS_transitions#AutoCompatibilityTable
Any idea what is wrong with that?
Try
-moz-transition: color 0.25s ease-in 0s;
It seems like the 0 at the end was breaking the transformation.
This works for me: http://jsfiddle.net/An4zV/2/