.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
z-index:103 !important;
}
With this css on hover the image morphs from the original image to the hover image giving a really cool effect, in firefox and IE9 I just get a hover image replacement. I put the -webkit-transition in both selectors but i'm pretty sure it only needs to be in
.mark.studio
Specify the unprefixed version of transition; Firefox and Internet Explorer dropped the prefixes. (Note that it’s Internet Explorer 10; IE9 doesn’t support transition.)
.mark.studio {
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index: 103 !important;
}
.mark.studio:hover {
background-image: url(../images/studio_icon-hover.png);
}
I took the liberty of taking z-index and transition off the :hover state; it’s pointless to add them again. (Unless you have another z-index with !important that overrides it, which would be a really bad design.)
Internet Explorer 9 doesn't support the -ms-transition tag, it only works properly on Internet Explorer 10 and up. IE10 supports both.
Related
I have set up css animation for my background images, it works fine on chrome but not on firefox and safari, do you have any idea how to make this work?
Homepage: http://argeville.projet-inwie.com/
My css for animation:
#test1
{ transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out; -ms-transition: background 0.4s ease-in-out;
}
Thank's
Maybe more code and details could help...
First thing, check this tool when you need to make your CSS compatible with "all" browsers.
Autoprefixing tool
Check this post too: https://css-tricks.com/almanac/properties/t/transition/
As they say: IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.
So this code is enought:
#test1 {
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
Maybe try to install the latest version of browsers that don't work well.
Empty browser cache?
Try to apply another property instead of background to deduce if it's transition or background property that makes trouble.
Happy coding!
Thanks for your help.
I tried your code but it still doesn't work.
Here is the set of code to manage the different background of my home with the passage of the mouse.
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.test2').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test2').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test3').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/aromes.jpg)');
});
$('.test3').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test5').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/centres.jpg)');
});
$('.test5').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
$('.test4').mouseenter(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/parfums.jpg)');
});
$('.test4').mouseleave(function() {
$('#test1').css('background-image','url(/wp-content/uploads/2021/04/ingredients.jpg)');
});
}); });
</script>
<style>
#test1{
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
transition: background 0.4s ease-in-out;
}
</style>
You are correct that the transition does not work on Firefox.
Here is a simple snippet to show the problem:
#test1
{
transition: background 0.4s ease-in-out;
-webkit-transition: background 0.4s ease-in-out;
-o-transition: background 0.4s ease-in-out;
-moz-transition: background 0.4s ease-in-out;
-ms-transition: background 0.4s ease-in-out;
background-image: url(https://picsum.photos/id/1015/200/300);
height: 200px;
width: 200px;
}
#test1:hover {
background-image: url(https://picsum.photos/id/1016/200/300);
}
<div id="test1"></div>
It depends on exactly what you want, but one way round it in this simple case is to not attempt a transition on the main element but to have the background images on before and after pseudo elements and fade them in and out. (They need to not be in the actual element because the opacity changes would affect its other content).
Hover on the image to get it to transition to another one.
#test1
{
position: relative;
height: 200px;
width: 200px;
}
#test1::before, #test1::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.4s ease-in-out;
}
#test1::before {
background-image: url(https://picsum.photos/id/1015/200/300);
opacity: 1;
}
#test1::after {
background-image: url(https://picsum.photos/id/1016/200/300);
opacity: 0;
z-index: -1;
}
#test1:hover::before {
opacity: 0;
}
#test1:hover::after {
opacity: 1;
}
<div id="test1"></div>
When the transition below occurs, the image becomes pixelated for a second or two. Do you know why it happens and how to fix it ?
#picture {
height: 96px;
width: 96px;
-webkit-transition: all 0.05s ease-out;
-moz-transition: all 0.05s ease-out;
-o-transition: all 0.05s ease-out;
transition: all 0.05s ease-out;
background-color: black;
}
#picture:hover {
height: 106px;
width: 106px;
-webkit-transition: all 0.05s ease-in;
-moz-transition: all 0.05s ease-in;
-o-transition: all 0.05s ease-in;
transition: all 0.05s ease-in;
}
<img src="http://stefandigital.com/yp/images/icons/man01.png" id="picture" />
Codepen
Instead of changing width and height properties, use transform and the scale() function.
Performance-wise, using transform will result in a better FPS because it avoids browser reflow.
#picture {
height: 96px;
width: 96px;
-webkit-transition: transform 0.05s ease-out;
-moz-transition: transform 0.05s ease-out;
-o-transition: transform 0.05s ease-out;
transition: transform 0.05s ease-out;
background-color: black;
transform-origin: 0 0;
}
#picture:hover {
transform: scale(1.141);
}
<img src="http://stefandigital.com/yp/images/icons/man01.png" id="picture" />
Revised Codepen
Notes:
Avoid using the keyword all in the transition property, targeting only the properties that are going to be transitioned helps in performance.
Unless the transition-timing-fuction changes in the hover state, the transition property does not need to be defined in the :hover pseudo-class.
transform-origin is used to change the origin of the transformation of the element.
The original images' size was way too big. It was 2000x2000 px, I brought it down to 128x128. Now the pixels are gone! But thank you guys for the optimization
How can i turn all css3 animations off in just Opera browser ?
I don't want to pickup them completly , just want to turn it off in opera.
You'll be looking at targeting just the opera browser, this is done with a prefix:
-o-transition: none;
So targeting a specific element would have the following:
a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: none;
transition: all 0.5s ease-in-out;
}
But your transition might be different without looking at a fiddle of your html and css.
At least, i used this code:
noindex:-o-prefocus, * {
animation : none !important;
-o-animation : none !important;
}
and problem is fixed.
moving image after hover
with chrome only!
see my page in google chrome browser: http://qass.im/teeny/
now hover all images..
Why moving image after hover?
.pin img{
width: 100%;
max-width:100%;
height:auto;
border-radius:3px 3px 0 0;
display:block;
opacity:0.5;
-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;
}
.pin img:hover{
opacity:1;
}
thanks.
Because of differ in image resizing algorithms (btw on my machine image center is "moved" in firefox), but not in chrome) - try to use an image of exact size you use in column 258x181px - in that case it wouldn't be resized by a browser and an effect of moving will dissappear.
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.