I have an element which does not have a background image when the app is loaded. Then when a button is clicked, a CSS class gets added to the element which sets the background-image for that element for a few seconds. Problem is - I can't get the background image to fade-in and fade-out.
What I tried:
.MyBox.formElementInput {
background-repeat: no-repeat;
background-position: 65px center;
background-size: "contain";
-webkit-transition:background-image 2s ease-in-out;
-moz-transition: background-image 2s ease-in-out;
-o-transition: background-image 2s ease-in-out;
transition: background-image 2s ease-in-out;
}
.MyBox.formElementInput.showSpinner {
background-image : url("/PmDojo/dojox/widget/Standby/images/loading.gif");
}
EDIT: JQuery is not an option.
CSS doesn't fade or animate background images without a javascript plugin. If you want an only CSS option, you need to wrap it in a div, and fade in/out the whole div.
If you don't mind the content of the div fading in/out as well:
#div-with-bg{
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
transition: opacity 1.5s linear;
background: url(background.png);
opacity: 0;
}
#div-with-bg:hover{
opacity: 1;
}
Related
So I did this for my graphic design portfolio. And on my "Photo editing" page I made div which shows the photo before the editing, and when you hover on the image it shows the edited photo. The problem is that 50% of the time when I hover on the photo it blinks to the photo instead of smooth transition.
CSS:
#photo {
background-image:url(../content/images/Editing/1.jpg);
background-size:104%;
-webkit-transition: background-image 0.3s ease-out;
-moz-transition: background-image 0.3s ease-out;
-o-transition: background-image 0.3s ease-out;
transition: background-image 0.3s ease-out;
}
#photo:hover {
background-image:url(../content/images/Editing/1a.jpg);
}
I'm trying to put a transition on my background-image on hover.
This is my Code so far:
HTML
<div class="item-one"></div>
CSS
.item-one {
height: 345px;
width: 256px;
background: url('http://placehold.it/256x345') scroll no-repeat center center;
background-size: cover;
-webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 150%;
}
See JSFIDDLE
But this doesn't work for me, tested in different browsers. Other transitions like background-color work as expected. Is there any restriction for transitions on this property?
I think the problem is with background-size: cover, when you change it to
background-size: 100%;
it will work
JSFiddle
There is some other question about background-size: cover alternative, that can help Is there an alternative to background-size:cover?
Or some different solution for problems like this:
CSS3 crossfade bg image when cover is used
You have a typo:
.item-one {
...
-o-transition: background-size 1500 linear
...
}
working version below:
.item-one {
background-size: 50%;
webkit-transition: background-size 1500ms linear;
-moz-transition: background-size 1500 linear;
-o-transition: background-size 1500 linear;
-ms-transition: background-size 1500ms linear;
transition: background-size 1500ms linear;
}
.item-one:hover {
background-size: 100%;
}
works fine, it didn't wokred before cuz of 'background-size:cover' :
**‘cover’:**
Scale the image, while preserving its intrinsic
aspect ratio (if any), to the smallest size such
that both its width and its height can completely
cover the background positioning area.
Try this using transform: scale(150%) for the item-one and the container set the specific size and overflow: hidden;
<div class=container>
<div class="item-one"></div>
</div>
css:
.container {
overflow: hidden;
}
.item-one:hover {
transform: scale(150%);
}
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
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'm trying to make a transition effect with background-color when hovering menu items, but it does not work. Here is my CSS code:
#content #nav a:hover {
color: black;
background-color: #AD310B;
/* Firefox */
-moz-transition: all 1s ease-in;
/* WebKit */
-webkit-transition: all 1s ease-in;
/* Opera */
-o-transition: all 1s ease-in;
/* Standard */
transition: all 1s ease-in;
}
The #nav div is a menu ul list of items.
As far as I know, transitions currently work in Safari, Chrome, Firefox, Opera and Internet Explorer 10+.
This should produce a fade effect for you in these browsers:
a {
background-color: #FF0;
}
a:hover {
background-color: #AD310B;
-webkit-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
<a>Navigation Link</a>
Note: As pointed out by Gerald in the comments, if you put the transition on the a, instead of on a:hover it will fade back to the original color when your mouse moves away from the link.
This might come in handy, too: CSS Fundamentals: CSS 3 Transitions
ps.
As #gak comment below
You can also put in the transitions into content #nav a for fading back to the original when the user moves the mouse away from the link
To me, it is better to put the transition codes with the original/minimum selectors than with the :hover or any other additional selectors:
#content #nav a {
background-color: #FF0;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
#content #nav a:hover {
background-color: #AD310B;
}
<div id="content">
<div id="nav">
Link 1
</div>
</div>
Another way of accomplishing this is using animation which provides more control.
/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
#keyframes onHoverAnimation {
0% {
background-color: #FF0;
}
100% {
background-color: #AD310B;
}
}
#content #nav a {
background-color: #FF0;
/* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
animation-duration: 1s; /* same as transition duration */
animation-timing-function: linear; /* kind of same as transition timing */
animation-delay: 0ms; /* same as transition delay */
animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
animation-play-state: running; /* can be set dynamically to pause mid animation*/
}
#content #nav a:hover {
/* animation wont run unless the element is given the name of the animation. This is set on hover */
animation-name: onHoverAnimation;
}
You can simply set transition to a tag styles and change background in hover
a {
background-color: #FF0;
transition: background-color 300ms linear;
-webkit-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
}
a:hover {
background-color: #AD310B;
}
<a>Link</a>