.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/
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).
It will be possible to obtain animate colour just by using css3?
Here is the demo about the effect I would like to obtain demo.
The demo is using jquery.color.js.
$(document).ready(function() {
$('.replace-bg-on-hover').hover(
function() {
$(this).animate({
backgroundColor: "#333"
}, 500);
return false;
}, function() {
$(this).animate({
backgroundColor: "#6CA2FF"
}, 500);
return false;
});
});
You can use css3 transitions for this. Here's a quick example - demo
Code from my example:
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #005ca1;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.box:hover {
background: #000;
}
Edit: Added the rest of the prefixes.
Of course, you can do it. You set a :hover color for the background and you don't forget to add the transition css property to the element :
CSS code :
.myElementToHover{
background: #c00;
transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease
}
.myElementToHover:hover{
background: #00c;
}
Generally speaking, when you want to use a CSS3 rule, Paul Irish (jquery) made a very usefull page : http://css3please.com/ Just use it, all the answers are here ! (except that you should now add the -ms- prefix).
With this code, you add a transition for every css property, but if you want to add a transition for only the backgroundColor, you replace 'all' by 'backgroundColor'.
0.5s is the duration of the animation. It can also be set in ms.
ease is the way the animation behave. Basic settings are :
linear
ease (default)
ease-in
ease-out
ease-in-out
But you can set your own transition :
cubic-bezier(0.215, 0.610, 0.355, 1.000)
Matthew Lein made a very nice page to help you make a custom easing settings : http://matthewlein.com/ceaser/
I'm having a issue with the background-image transition using CSS3. The problem is that it occasionally flickers the first time you roll over it. If you roll-over it the second time it's no problem makes a smooth fade-in/fade-out from one to the other.
I've searched google about this issue found a bunch of people having the same problem. But they resolved the issue by using 1 background image and then using background-position to hide it till you roll over it.
I can't do that with mine because I need the smooth fade-in/fade-out animation from 1 image to the other (it's 2 images of the same button with different colors and thingies.) If I use background-position it'll come from underneath the button on it's place. I need a fade-in fade-out animation.
So I'm guessing this issue happens because of the image not being loaded that, and that it needs a fraction of a second to load.
Here's the code:
.btn-denken{
background:url(../images/btn-denken.png);
width:219px;
height:40px;
float:left;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.btn-denken:hover{
background:url(../images/btn-denken-hover.png);
}
Help is very much appriciated! Thank you!
The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.
In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.
In my CSS:
body {
-webkit-transition: background 1s;
background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
position: absolute;
left: -100%; /* to hide the dummy */
}
Simple javascript to cache the images:
var images = [],
load = function() {
$('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
$('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
};
for(var i=0; i<4; i++) {
var image = document.createElement('img');
image.src = i + '.jpg');
image.index = i;
image.onload = load;
images.push(image);
}
Perhaps you can use two separate containers in the same area using absolute positioning and z-index. Set the two different background images one per container, and then when you hover just make the opacity of the top container to be fully transparent.
I had the same problem: I wanted to use transitioning to fade between images. Using a 2-in-1 image (or a sprite) and using css to change it's position on hover doesn't work because you end up seeing the image scrolling side-side or up-down.
(FYI, you're correct - the blink occurs because it takes a moment to load your image but the transition has already begun from the moment you hover. After you've hovered once, the image has loaded so it won't happen again until you reload the page.)
Here is a purely HTML and CSS solution:
Create a containing div
Place an anchor tag and image tag within this container
Set a background image on the anchor tag (this should be the image you want displayed on page-load)
The image tag should be the image you want to display on hover and needs a z-index applied to bring it behind your anchor tag
After much experimentation, I arrived at the following solution:
(Demo here: http://jsfiddle.net/jmtFK/)
HTML:
<div class="button" id="specific">
<img>
</div>
CSS:
.button {
position: relative;
}
.button a {
display: block;
width: px;
height: px;
background: url() no-repeat;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.button a:hover {
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button img {
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
.button a:hover + img {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
}
I initially didn't have my z-indexed image set to transparent and found that the edges of it appeared around the outside of the link image. This was ugly so I applied opacity: 0.
I also added CSS transitions for "hover in" and "hover out". (Basically, the transition settings applied to a certain CSS state dictate how it transitions to that state. eg the transition settings applied to .button a take effect when button a:hover is no longer applicable.
I hope that helps.
I have in my CSS file the following code, which globally turns on transitions on all links for all CSS properties on anchor elements:
a{
display:block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
Later in CSS file, I would like to turn off transition on specific links (let's say with class notrans) but only for background-position.
Something like:
a.notrans{
-webkit-transition: background-position 0;
-moz-transition: background-position 0;
-o-transition: background-position 0;
-ms-transition: background-position 0;
transition: background-position 0;
}
But this code does not work.
I must turn background-position transition and keep other transitions, so sprite - background image would not move on a.notrans ...
You just have to declare new property for transitions, and old inherited ones are gone.
So, i just used this>
a.notrans{
-webkit-transition:color .2s;
-moz-transition:color .2s;
-o-transition:color .2s;
-ms-transition:color .2s;
transition:color .2s;
}
After this, only color transition is working!
Maybe there is better solution ?
So I have the following CSS transitions attached to an element:
a {
-webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.1s ease-in, background-color 0.1s ease-in;
transition:color 0.1s ease-in, background-color 0.1s ease-in;
}
Is there a way to disable these inherited transitions on specific elements?
a.tags { transition: none; }
Doesn't seem to be doing the job.
The use of transition: none seems to be supported (with a specific adjustment for Opera) given the following HTML:
Content
Content
Content
Content
...and CSS:
a {
color: #f90;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a:hover {
color: #f00;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a.noTransition {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
JS Fiddle demo.
Tested with Chromium 12, Opera 11.x and Firefox 5 on Ubuntu 11.04.
The specific adaptation to Opera is the use of -o-transition: color 0 ease-in; which targets the same property as specified in the other transition rules, but sets the transition time to 0, which effectively prevents the transition from being noticeable. The use of the a.noTransition selector is simply to provide a specific selector for the elements without transitions.
Edited to note that #Frédéric Hamidi's answer, using all (for Opera, at least) is far more concise than listing out each individual property-name that you don't want to have transition.
Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none, following self-deletion of #Frédéric's answer.
If you want to disable a single transition property, you can do:
transition: color 0s;
(since a zero second transition is the same as no transition.)
Another way to remove all transitions is with the unset keyword:
a.tags {
transition: unset;
}
When used with the transition property, unset is equivalent to initial, since transition is not an inherited property:
a.tags {
transition: initial;
}
A reader who knows about unset and initial can tell that these solutions are correct immediately, without having to think about the specific syntax of transition.
Additionally there is a possibility to set a list of properties that will get transitioned by setting the property transition-property: width, height;, more details here
You could also disinherit all transitions inside a containing element:
CSS:
.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
HTML:
Content
Content
<div class="noTrans">
Content
</div>
Content
Based on W3schools default transition value is: all 0s ease 0s, which should be the cross-browser compatible way of disabling the transition.
Here is a link: https://www.w3schools.com/cssref/css3_pr_transition.asp