I am trying to animate/crossfade bg image using CSS3. I know that this works, but only in Chrome for now:
.image {
width: 100%;
height: 100%;
background-size: cover;
transition: background-image .5s ease-in;
background-image: url(../image.jpg);
}
.image:hover {
background-image:url(../image1.jpg;
}
In Chrome this works nicely, with seamless transition from one image to another. I know that I can animate background-position property using CSS3 keyframes and sprite image, but the problem is that I must use cover property. If I know exact dimensions of my holder div, then changing background position with keyframes works like a charm, but when adding background-size:cover in the mix, well, the only thing I can say that the results are not as expected.
Are there any workaround for this?
You can set the second image on a pseudo element, and just change the opacity of that to make the hover effect
.test {
position: relative;
width: 450px;
height: 300px;
background-image: url(http://placekitten.com/300/200);
background-size: cover;
}
.test:after {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(http://placekitten.com/600/400);
background-size: cover;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
opacity: 0;
}
.test:hover:after {
opacity: 1;
}
fiddle
By the way, this works cross-browser also
Related
I want to have a transition when I change background on click. The original background is a gradient while the second background is a shade of blue applied to the first background. Like so:
From:
To:
I can't find a way to apply a simple 0.3s transition for this change.
My styles:
body {
background: linear-gradient(25deg, #b24592, #f15f79) no-repeat;
}
.layer {
background: rgba(9, 21, 110, 0.37);
mix-blend-mode: multiply;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
My .html:
<body>
<div class="layer" [hidden]="shopIsOpen">
</div>
...
</body>
What can I do to implement a simple transition between these two backgrounds on a click event?
Thanks in advance.
You can not transition gradients. Try transitioning the opacity or height of .layer instead
Unfortunately, transition doesn't work with linear-gradient, instead you have to work with opacity or with moving background-position on hover.
.magic {
background: linear-gradient(25deg, #b24592, #f15f79);
height: 200px;
width: 200px;
}
.magic::after {
background: linear-gradient(25deg, #f15f79, #b24592);
content: '';
display: block;
height: 100%;
opacity: 0;
transition: opacity .3s ease;
width: 100%;
}
.magic:hover::after {
opacity: 1;
}
<div class="magic"></div>
If you are not changing the colors or position of colors in linear-gradient you can just add a opacity property to the overlay element ".layer" and add hover event to it
And if you are trying to change the color or their position you can add an animation of gradient with tools like gradient-animator (which does it by changing the background postion as you can't add transition or animation to css gradient) and append it to the body directly with js
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
Demo: [http://everythinghomegrown.com/] (look at the Customize Your Own section with the four batman images)
For some reason, the background-size is not transitioning. Instead it jumps from one size to the other without a smooth transition.
div {
background-size: 100%;
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
Why is the transition not working? I’m experiencing this in Chrome, Safari, and Firefox.
Solved.
Originally I had this:
div {
background-size: 100%;
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
I fixed the problem by adding a second value to the background-size property.
div {
background-size: 100% 100%; /* added second 100% to fix the problem */
transition: all 0.2s ease;
}
div:hover, div:focus {
background-size: 115% 115%;
}
Im trying to make a zoom effect with background-size. The issue I have is I need to animate from background-size:cover to something like background-size: 105%.
When I try this it with a "transition: 0.1s background-size linear" it animates from 0 to 104%.
Is there anyway I can animate from cover to that percentage with out going back to 0.
(im using cover because I don't know the size of the image but I have a fixed size div to display it in.)
Thanks
Pete
One posibility is to have the background set in a pseudo element, and then do the zoom in the base element. (thru transform property, for instance)
.test {
width: 300px;
height: 300px;
position: relative;
left: 30px;
top: 30px;
transition: all 1s;
}
.test:hover {
-webkit-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.test:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background: url("http://lorempixel.com/600/400");
background-size: cover;
}
<div class="test">
</div>
Demo
I'm using the following CSS code on my linked images:
a img:hover {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
background: #f00;
}
The idea is that when a user hovers over an image, this will be slightly tinted with red. The browser though seems to ignore the "background: #f00;" property.
What am I doing wrong?
Thanks in advance
It won't work as you are having image, so you need to have an overlay element, probably a div
Demo
HTML
<div class="wrap">
<img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay"></div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
}
.wrap:hover .overlay {
background: rgba(250, 0, 0, .1);
}
Note: You should have a positioned relative container, else your absolute positioned div will run out in the wild, moreover, you can remove display: inline-block; and provide respective height and width to the container element, see to it that it sticks to your image, alternatively you can also use transitions for smooth effect
For transition you need to modify the class like this
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
Demo Transition