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);
}
Related
I am using twenty fourteen theme for my WordPress blog.
It's a travel blog still in development... never mind the content though.
Anyway, I have one sub-menu on the main menu.
The site is:
http://www.journeywithandrew.com/
so if you scroll over "WORLD HERITAGE SITES: REVIEWS & INFO" on the menu, you will see a sub-menu appear with two items: "map view" and "list view"
My question is: I am using a css easing-in background effect on the main menu as you can see when you hover over the menu items. However, the sub-menu does not ease in - it just appears.
I would like the sub-menu to also ease in to match the transition time of the main menu (0.3s)
Any ideas? I tried to plug in the CSS code into places using chrome's dev tools, but nothing worked.
thanks!
code:
a {
-o-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
-ms-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
-moz-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
-webkit-transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
transition:color .3s ease-out, background .3s ease-in, border .3s ease-in-out;
}
css property attibute auto not spported by transition property a nice alternative would be to use opacity
.primary-navigation ul li:hover > ul, .primary-navigation ul li.focus > ul{
opacity:1;
}
.primary-navigation ul ul{
transition:all 0.3s ease 0s;
opacity:0;
}
I have a side menu that slides out to a certain width. The slider contains divs with text.
When the side menu is sliding out or back in (during transition) - the text attempts to resize to fit the minimising space causing all the words to briefly be in a vertical column.
Is it possible to have the text and divs fixed and the transition reveals more and more of the data in it's final formatting (i.e. how it will be displayed at the end of the transition) versus the data attempting to accommodate the ever increasing/decreasing space?
Here is the transition code:
.slider {
float: left;
height: 100%;
width: 0;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
I'm trying to get tabs (as a menu) to be offset the screen and when somebody hovers over it, it transitions downwards revealing more of the tab. My code is this:
.tab:hover {
position: relative;
top: 45px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
When I hover over the image, it does the transitioning downwards correctly. However, when I leave the tab, it snaps back into place. What I'd like it to do is transition back into its original place, not snap. What am I missing from the code to make this happen?
UPDATE:
I figured out the problem. I made a new CSS style set for just .tab and I put in the transitioning AND top: 0px.
Instead of putting it on the :hover, put the transition on .tab.
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;
}
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.