CSS only Direction aware hover

HTML & CSS
21

It looks fine, Paul. :slight_smile:
(For IE6 and IE7: a img {border:0:} can be added to avoid the blue IE borderlines around an image in a link.)(Still have to compare)

In a quick move, here are:

Maybe for the finishing touch: to make the disappearing of the overlay some less abrupt, I’ve added a css opacity-transition to fade out the overlay.

22

(Still have to compare) > Ah, I see you use a fake.gif to call IE10 (my solution was a rgba .1% background color).

23

Great work again Francky:)

Thanks for your support and findings.

Ah, I see you use a fake.gif to call IE10.

Yes, it’s an old trick I’ve been putting to use since ie5 lol :slight_smile:

24

[QUOTE]Great work again Francky :slight_smile:
Thanks for your support and findings.
[/QUOTE]
If the basic work is done, the rest is more or less freewheeling. :wink:
=======

a fake.gif … Yes, it’s an old trick I’ve been putting to use since ie5 lol :slight_smile:

Indeed, I remember. The invisible gif is carefully stored in the toolbox for IE5, IE5.5 and IE6 in a dusty place in my attic. :smiley:

25

Some oops’s in my examples:

  • I did forget to mention that the fade-out is only working in Firefox (now added in the footnotes). It seems the other modern browsers cannot combine the transition with the animation in this case; I don’t know why. :rolleyes:
  • In Safari the overlay-area wasn’t filling the image-area when the table-cell property was added. Solved by moving the padding from the <strong> to the <span> for the browsers who support the table-cell property.

Step 6, updated: [U]direction-hover-rebuild-06.htm[/U]
(with added IE6 filter for semi-transparency of the overlay now a fallback for IE6 too).

Minor general remarks @Paul:

  • Only in the source code I saw that the <h1> header is a link to this Sitepoint-topic (because of the black color/underlining I didn’t hover). Maybe a blue border-bottom instead of the underline can help.
  • “Modern browsers only” - “Modern” is walking together with the years. :wink: Maybe a footnote with explication of what is meant by “modern” in the time of presenting the demo?

So remaining: you made a beautiful example of the power of css3! :slight_smile:

26

Good points, I’ll update those later today as per your suggestions.:slight_smile:

Thanks for your help on tidying this up especially as I have been away a few days this week and time was short so it was good to have a second set of eyes looking over things and smoothing out the rough edges.