Hey guys,

so I have this problem with my hover images.
I want to get rid of the initial flicker as they load. But since I got a transition on them, I cannot use sprites. I also tried placing the images in html (and hiding them) but that doesn't work either. I didn't even expect this to happen, because I use an image proloading script.

Also, when I test the website in IE and Firefox, the transition (on logo and the arrow at the bottom) doesn't work.
Another problem is when I put 'margin: auto' on the logo, in Firefox it ignores the margin-top: 40px so the logo is right at the top of the site. But when I don't include margin: auto, the logo isn't centered in IE. I don't know how to deal with this browser compatibility BS, because there is no way of using vendor prefixes on things like margin.

Here's the whole code as a file, since it is quite long:
http://www.mediafire.com/view/5j1ho4...nr9/index.html
http://www.mediafire.com/view/jn2dp7i5c5ugm70/main.css

To sum it up, I need to:
1. fix the flickering of the images the first time I hover over them
2. 'enable' transitions in other browsers.
3. fix the position of the logo, as I described above.

I'd really appreciate any help, because I want to get this done finally, but there's always something that comes in the way.
Thank you

I have found that using Nicolas Gallagher's normalize.css can throw up some unexpected results.

 

Try using margin: 40px auto auto; This might lever the margins the way you seem to be trying to.

 

I'm sorry but I have no experience of java and have not had the flicker problem you are describing, but I know somebody here is bound to have the answer.

 

As to the transitions, your vendor prefixed versions are missing the 'all' property value the other version has!

Your site's box shadows will not be identical in all browser's because your missing the essential prefix's on them as well plus your transitions have no algorithym applied, ie linear, or ease-in-out so the browser does not know how to process this task and will dump it. This may even be why you are getting the flicker.

 

As to you centering trick maybe you should have a read of this article on Codrops - justified and verically centered header elements read it through a couple of times and it will suddenly just click, The use of a pseudo element makes things act muck 'friendlier' in the same confined space.

 

I also noticed you are using floats, have the clearfix class and row class clearfix from Nicolas Gallegher, but are not implementing the row class anywhere else in your css. By this I mean your .row { properties: values; } are missing, for a responsive site to work on this principle you will need to rework this. There are some great tutorials on Codrops about responsive grids, and also about adaptive web design as well. It is a resource I use a lot, along with Elated.com & sitepoint.com

 

Hope these links help.

Wow, thanks a lot for your answer! I'll go through the points you listed and will see what happens

So the margin stuff didn't work...

As for the flickering, I found out that it happens for me only in chrome (but it's not connected to the transitions). I don't know if it's just me, or chrome in general has some bug.

Here's a good example: http://codepen.io/thebabydino/pen/dsIAg When I hover over the image I get a quick white flash.

 

I found that apparently this type of transition only works in Chrome...

Sorry the other bits are not solved, I have just had a look on Codepen at your example and noticed you are using 2 div's and swapping one for the other. Have you tried instead setting the background image in the titlu div, and then setting the second image as the background for titlu in the pseudo :hover with the transition referencing the background.

 

Swapping the div's being displayed might be confusing the browser.

 

This is how I would achieve the effect - http://cdpn.io/vqIpE

 

I have seen a couple of good tutorials that use the ~ when selecting elements so that you can have other content elements only become visible when the item is in the pseudo hover state, but can't remember where at the moment so I will go and look them up and get back to you on those asap!

Edited December 24, 201312 yr by Weedy101

Have a look at these two articles on Codrops, they both address some of the finer points of transitions and pseudo elements

 

http://tympanus.net/codrops/2013/07/05/using-custom-data-attributes-and-pseudo-elements/

 

This one has some nice examples to go with it and utilizes the before and after pseudo elements as well.

 

http://tympanus.net/codrops/2013/05/22/examples-of-pseudo-elements-animations-and-transitions/

 

On Codrops there are dozens of tutorials, blueprints, and articles that discuss in-depth many topics you may find useful, I have them bookmarked.

Thanks. I'll look into that and hopefully will solve some of the problems.

 

But even your example in codepen flickered when I hover.. must be something wrong in Chrome.

That's strange it didn't flicker for me last time, but did when it first loaded this time, maybe if you add the preloader.js to my version it will cure that. I don't know java but I think the server lag could be accounting for the initial flick.

You can use a sprite in a css transition.

 

Firstly you can create a block level element and give that a position value of relative. Then you set the background image of the element to the url of your sprite.

Then you can use the :before pseudo element and position that to absolute with top, right, bottom and left of 0. Set the background image url of the pusedo element to the sprite.

 

Now you will only see the second sprite, to fix this. you set the opacity on the pseudo element to 0.

 

Finally you can use hover event along with any css transition timer you might want to bring the opacity of the pseudo element back to 1.

 

 

* The above can only be used for opacity transition, but for a slide in or out effect you can just alter the background-position on hover.

Edited December 27, 201312 yr by rbrtsmith