Comments on: Changing a Background-image with CSS3 Transitions

By: Veckans länktips – 2012-10-07 | lillbra.se

Veckans länktips – 2012-10-07 | lillbra.se — Sun, 07 Oct 2012 19:44:27 +0000

[...] Changing a Background-image with CSS3 Transitions :: Fleeting Epiphanies Vill du använda css transitions på bakgrundsbilder? Det går! Enkelt men snyggt. [...]

By: anonymaus

anonymaus — Wed, 20 Jun 2012 21:46:07 +0000

and the html would look something like this:

div id=”msgbtnbg”
a href=”/contact” id=”msgbtn” title=”"
/a
/div

By: anonymaus

anonymaus — Wed, 20 Jun 2012 21:40:27 +0000

div style=”display:none”
img src=”../images/hdr-msg_up.png” alt=”" /
img src=”../images/hdr-msg_down.png” alt=”" /
img src=”../images/hdr-twitter_up.png” alt=”" /
img src=”../images/hdr-twitter_down.png” alt=”" /
/div

By: anonymaus

anonymaus — Wed, 20 Jun 2012 21:39:35 +0000

a hack for transitioning between normal and hover states would be putting the hover image as the background image for the link set at zero opacity, on top of the div under it that has the normal state background image. then, on hover, the opacity transitions to 100 and back out.

i.e.
#msgbtnbg { width: 160px; height: 46px; background: url(../images/msg_normal.png) center top no-repeat; }

#msgbtn { width: 160px; height: 46px; background: url(../images/msg_up.png) center top no-repeat;
filter:alpha(opacity=0); opacity: 0; -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear;}

#msgbtn:hover, #msgbtn:focus { filter:alpha(opacity=100); opacity: 100; }

#msgbtn:active { background: url(../images/hdr-msg_down.png) center top no-repeat; }

dont forget to pre-load images somewhere else on the page with something like:

By: The Ins and Outs of Dynamic Navigation Menus « DesignParlor

The Ins and Outs of Dynamic Navigation Menus « DesignParlor — Sat, 17 Mar 2012 17:43:39 +0000

[...] is handy if your layout works well holding fixed-width link buttons. jQuery is an option but CSS3 transitions may feel like a better alternative. Both CSS3 and JavaScript boast flaky support in mobile OS’, [...]

By: CSS for navigation |

CSS for navigation | — Thu, 16 Feb 2012 09:13:01 +0000

[...] Changing a Background-image with CSS3 Transitions [...]

By: Dustin Gardner

Dustin Gardner — Tue, 03 Jan 2012 13:37:12 +0000

On the sprite image transition (First Link) I’m looking to make the size about 1005 pixels wide, and 150 pixels tall. The changing of the actual area was easy, but how would I get the image to fit correctly here as well? This involves moving the transitional image over more, creating a larger image altogether, and then positioning it differently as well. I’m not the best when it comes to mathematics of this nature, so could someone give me some pointers here?

By: The Ins and Outs of Dynamic Navigation Menus | Design Shack

The Ins and Outs of Dynamic Navigation Menus | Design Shack — Mon, 07 Nov 2011 22:04:06 +0000

[...] effect is handy if your layout works well holding fixed-width link buttons. jQuery is an option but CSS3 transitions may feel like a better alternative. Both CSS3 and JavaScript boast flaky support in mobile [...]

By: The Ins and Outs of Dynamic Navigation Menus | Designer Malaysia

The Ins and Outs of Dynamic Navigation Menus | Designer Malaysia — Wed, 26 Oct 2011 02:20:17 +0000

By: Asaf Bochman

Asaf Bochman — Wed, 06 Apr 2011 19:06:27 +0000

So I’ve been building a small subnav on one of our landing pages and came up with a way to transition from one background to another with a fallback for IE.

The markup is simple:

The css is a bit more but basically puts two layers of background images and animating the opacity on hover. This can be modded for IE after adding this to the :hover state of the anchor.

element {
background-image:hover image; // This will be shown on hover.
}

a {
background-image:non-hover image; // This will be shown during all states except hover

}
a:hover {
filter:alpha(opacity=0); // For IE
opacity: 0; // For modern browsers
// Animates the opacity of the anchor image revealing the image underneath contained in the element.
}

Example:

http://www.tsfexhbit.com/landing_page/featured_exhibits

I don’t have too much time to mess around but I believe this might also be achievable with the new CSS3 psuedo class “:before” instead of using an additional element.

Cheers.