CSS image transition

Question

Is it really impossible to let CSS recognize the change in src of an image and apply the correct transition, without resulting to the hacks that I find online, such as just placing several images over each other or using a combination of src and background?

It seems like such a deficiency as images are one of any website's main elements (divs, images, text). My question is: is it really not supported directly, and if not, why?

Answer 1

It is possible. You can create CSS rules to match elements by certain values of certain attributes. This is a very rarely used feature of CSS selectors but it is supported since CSS 2.1 and I've even used it once - works in all browsers, including IE7. You can read more about this here: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Example:

img[src='one.png'] { ... }
img[src='two.png'] { ... }

Live demo: http://jsfiddle.net/dJJqf/

Answer 2

CSS cannot alter the DOM. So no, you can't edit the src attributes.

You can, of course, use either JavaScript, or use CSS backgrounds (background-image) which can be changed from CSS.

Alternatively, use a lot of <img> tags in HTML, then use CSS to move these around.