I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image...
The CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: transparent;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
.title a:hover {
background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSITION */
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
transition: background 1s;
}
Take a look: http://jsfiddle.net/AK3La/
You can transition background-image. Use the CSS below on the img element:
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet (bugzil.la). Not sure about IE.
The solution (that I found by myself) is a ninja trick, I can offer you two ways:
first you need to make a "container" for the <img>, it will contain normal and hover states at the same time:
<div class="images-container">
<img src="http://lorempixel.com/400/200/animals/9/">
<img src="http://lorempixel.com/400/200/animals/10/">
</div>
with CSS3 selectors http://jsfiddle.net/eD2zL/1/ (if you use this one, "normal" state will be first child your container, or change the nth-child() order)
CSS2 solution http://jsfiddle.net/eD2zL/2/ (differences between are just a few selectors)
Basically, you need to hide "normal" state and show their "hover" when you hover it
and that's it, I hope somebody find it useful.
Unfortunately you can't use transition on background-image, see the w3c list of animatable properties.
You may want to do some tricks with background-position.
I've figured out a solution that worked for me...
If you have a list item (or div) containing only the link, and let's say this is for social links on your page to facebook, twitter, ect. and you're using a sprite image you can do this:
<li id="facebook"></li>
Make the "li"s background your button image
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
Then make the link's background image the hover state of the button. Also add the opacity attribute to this and set it to 0.
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
}
Now all you need is "opacity" under "a:hover" and set this to 1.
#facebook a:hover {
opacity:1;
}
Add the opacity transition attributes for each browser to "a" and "a:hover" so the the final css will look something like this:
#facebook {
width:30px;
height:30px;
background:url(images/social) no-repeat 0px 0px;
}
#facebook a {
display:inline-block;
background:url(images/social) no-repeat 0px -30px;
opacity:0;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
#facebook a:hover {
opacity:1;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
If I explained it correctly that should let you have a fading background image button, hope it helps at least!
You can use pseudo element to get the effect you want like I did in that Fiddle.
CSS:
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
position: relative;
}
.title a:after {
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
content: "";
opacity: 0;
width: inherit;
height: inherit;
position: absolute;
top: 0;
left: 0;
/* TRANSISITION */
transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
}
.title a:hover:after{
opacity: 1;
}
HTML:
<div class="title">
HYPERLINK
</div>
If you can use jQuery, you can try BgSwitcher plugin to switch the background-image with effects, it's very easy to use.
For example :
$('.bgSwitch').bgswitcher({
images: ["style/img/bg0.jpg","style/img/bg1.jpg","style/img/bg2.jpg"],
effect: "fade",
interval: 10000
});
And add your own effect, see adding an effect types
Try this, will make the background animated worked on web but hybrid mobile app
not working
#-webkit-keyframes breath {
0% { background-size: 110% auto; }
50% { background-size: 140% auto; }
100% { background-size: 110% auto; }
}
body {
-webkit-animation: breath 15s linear infinite;
background-image: url(images/login.png);
background-size: cover;
}
Considering background-images can't be animated,
I created a little SCSS mixin allowing to transition between 2 different background-images using pseudo selectors before and after. They are at different z-index layers. The one that is ahead starts with opacity 0 and becomes visible with hover.
You can use it the same approach for creating animations with linear-gradients too.
scss
#mixin bkg-img-transition( $bkg1, $bkg2, $transTime:0.5s ){
position: relative;
z-index: 100;
&:before, &:after {
background-size: cover;
content: '';
display: block;
height: 100%;
position: absolute;
top: 0; left: 0;
width: 100%;
transition: opacity $transTime;
}
&:before {
z-index: -101;
background-image: url("#{$bkg1}");
}
&:after {
z-index: -100;
opacity: 0;
background-image: url("#{$bkg2}");
}
&:hover {
&:after{
opacity: 1;
}
}
}
Now you can simply use it with
#include bkg-img-transition("https://picsum.photos/300/300/?random","https://picsum.photos/g/300/300");
You can check it out here:
https://jsfiddle.net/pablosgpacheco/01rmg0qL/
If animating opacity is not an option, you can also animate background-size.
For example, I used this CSS to set a backgound-image with a delay.
.before {
background-size: 0;
}
.after {
transition: background 0.1s step-end;
background-image: $path-to-image;
background-size: 20px 20px;
}
Salam, this answer works only in Chrome, cause IE and FF support color transition.
There is no need to make your HTML elements opacity:0, cause some times they contain text, and no need to double your elements!.
The question with link to an example in jsfiddle needed a small change, that is to put an empty image in .title a like background:url(link to an empty image); same as you put it in .title a:hover but make it empty image, and the code will work.
.title a {
display: block;
width: 340px;
height: 338px;
color: black;
background: url(https://upload.wikimedia.org/wikipedia/commons/5/59/Empty.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
.title a:hover{ background: transparent;
background: url(https://lh3.googleusercontent.com/-p1nr1fkWKUo/T0zUp5CLO3I/AAAAAAAAAWg/jDiQ0cUBuKA/s800/red-pattern.png) repeat;
/* TRANSISITION */
transition: background 1s;
-webkit-transition: background 1s;
-moz-transition: background 1s;
-o-transition: background 1s;
}
Check this out https://jsfiddle.net/Tobasi/vv8q9hum/
With Chris's inspiring post here:
https://css-tricks.com/different-transitions-for-hover-on-hover-off/
I managed to come up with this:
#banner
{
display:block;
width:100%;
background-repeat:no-repeat;
background-position:center bottom;
background-image:url(../images/image1.jpg);
/* HOVER OFF */
#include transition(background-image 0.5s ease-in-out);
&:hover
{
background-image:url(../images/image2.jpg);
/* HOVER ON */
#include transition(background-image 0.5s ease-in-out);
}
}
This can be achieved with greater cross-browser support than the accepted answer by using pseudo-elements as exemplified by this answer: https://stackoverflow.com/a/19818268/2602816
I was struggling with this for a bit, I first used a stack of images on top of each other and every three seconds, I was trying to animate to the next image in the stack and throwing the current image to the bottom of the stack. At the same time I was using animations as shown above. I couldn't get it to work for the life of me.
You can use this library which allows for **dynamically-resized, slideshow-capable background image ** using jquery-backstretch.
https://github.com/jquery-backstretch/jquery-backstretch
I have an over hover animation glitch. When you're near the bottom of the item, it jumps, uncontrollably, is there any fix?
Sample image :
.btn:hover{
background-color: #2795de;
-moz-transform: translate(0, -1.3em);
-o-transform: translate(0, -1.3em);
-webkit-transform: translate(0, -1.3em);
}
Just set transition on .btn
.btn{
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-webkit-transition: all 2s ease;
}
.btn:hover{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
DEMO
.btn{
width:200px;
height:200px;
border-radius:4px;
background: red;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-webkit-transition: all 2s ease;
}
.btn:hover{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
<div class=btn > HOVER ME </div>
The jump is being caused by the translate property in your CSS definitions.
If the jump is unintended, you can simply remove it from your CSS definition :
.btn:hover{
background-color:#2795de;
/* -moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em); */
}
Or you can split the css into two parts :
.btn{
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}
.btn:hover {
background-color:#2795de;
}
remove your btn.hover and write only btn because hover is take event when your mouse cuser comes up on your button(.btn). so remove it.
and write
`.btn{
background-color:#2795de;
-moz-transform:translate(0,-1.3em);
-o-transform:translate(0,-1.3em);
-webkit-transform:translate(0,-1.3em);
}`
Basically your button is only going up on :hover but the distance that it goes up puts your button out of :hover state and it goes down. When it goes down it goes under the cursor again and goes into :hover state.
depending on what you want to achieve but instead of actually moving your button up on hover just change the background-color of it. You'll find people will be unable to actually click on it. Or just add a large padding-bottom so when button goes up the cursor still stays in :hover state.
I am transitioning a couple of background images. However, I am noticing that when if the user acts before the transition has fully taken affect, the transition is instant.
For example, I hover over the div and the image takes 1 second to completely transition. However, I remove the cursor .5s into the transition. So it transitions back to the original image but instead of smoothly transitioning, it changes instantly. How do I make it smooth at all times?
.class {
width:500px;
height:500px;
background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg");
-webkit-transition: all 1s ease 0;
-moz-transition: all 1s ease 0;
-o-transition: all 1s ease 0;
transition: all 1s ease 0;
}
.class:hover {
background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}
<div class="class"></div>
http://codepen.io/john84/pen/vEdPEW
fiddle
I changed ease to ease-in-out
edit: Firefox doesn't support this, but there are many workarounds, example:
fiddle
HTML:
<div class="class"></div>
<div class="class2"></div>
CSS:
.class {
position:absolute;
width:500px;
transition:all 500ms;
height:500px;
background-image:url("http://activite-paranormale.net/extended/photo/news/nature-harmony-girl.jpg");
}
.class2{
width:500px;
height:500px;
background-image:url("http://images4.fanpop.com/image/photos/22700000/Spring-beautiful-nature-22727146-500-500.jpg");
}
.class:hover {
opacity:0;
}
I'm trying to make a span rotate by 90° and to change margin-top on hover, but failing.
The span does rotate, but doesn't change its margin-top.
HTML
<div class="cheersWrapper">
<span class="cheers">
<h1>Hi!</h1>
</span>
<span class="smile">
<h1> :)</h1>
</span>
</div>
CSS
.cheersWrapper{
-webkit-transition-duration: 5s;
-moz-transition-duration: 5s;
-o-transition-duration: 5s;
transition-duration: 5s;
}
.cheersWrapper .smile {
display: none;
position: relative;
}
.cheersWrapper:hover .smile {
display: inline-block;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
transition: margin-top .5s;
-webkit-transition: margin-top;
-moz-transition: margin-top .5s;
-o-transition: margin-top .5s;
}
.cheersWrapper:hover .smile:hover{
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
margin-top:-25px;
}
.cheersWrapper .cheers{
display: inline-block;
}
Demo: http://jsfiddle.net/vmrq7ep7/3/
It looks like it has a sort of a Parkinson syndrome and it's stuck.
How can I make it animate its margin top?
Thanks in advance for your help.
You can use a css translate instead of margin for the .cheersWrapper:hover .smile:hover class:
transform:rotate(90deg) translate(0,-25px);
Then for the .cheersWrapper:hover .smile class set:
transition-property: transform;
Edited jsfiddle: http://jsfiddle.net/vmrq7ep7/4/
btw you should only need the -webkit- prefix and -ms- for IE9.
I wanted to create a Metro Style Website and want to add Buttons like in the following :
http://themeforest.net/item/metro-lab-responsive-metro-dashboard-template/full_screen_preview/5359122
When we hover over the 'New User', 'Sales' etc Tabs, the icons/Images in the tabs rotates, increases its size and looses opacity.
But I am not able to get the exact output. I get only 2 outputs at a time :
--> Opacity and Scaling
--> Opacity and Rotation
but not all of them simultaneously.
You can see where I had reached at :
http://developer.nuevothoughts.com/jiteen/attendance/docs/#
My Current CSS is :
.icon-rocket{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.icon-rocket:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
/******************************/
-webkit-transform: scale(2.5,2.5);
-moz-transform:scale(2.5,2.5);
opacity: 0.5;
-moz-opacity: 0.5;
}
I would appreciate any kind of Help in this.
add following code
.main_tab.shortcut.span2.padding20.text-center a:hover i {
font-size: 40px;
opacity: 0.5;
transform: rotate(45deg);
}
and remove the hover you used (icon-rocket:hover)