Transition css3

Bonjour,

j'ai une page sur mon site avec plusieurs images carrées.
Quand on clique dessus, on peut voir la version grand format.

J'aimerais cependant faire une transition css3 pour que lorsque l'on survole l'image, on ai une baisse de l'opacité + une petite image de loupe qui apparait.

Je sais déjà comment réduore l'opacité : transition: opacity .25s ease-in-out;

mais j'ai 2 questions :

1/ Comment faire pour qu'une petite image de loupe s'affiche au survol en transition ? Par une div avec laquelle on jouerait ?

2/ Ya t-il une technique pour détecter si le navigateur du visiteur supporte ou non les transitions ? J'utilise en effet du javascript sur certains éléments de mon site (animation du menu, galerie avec thumbnails) qui pourrait être remplacé par ces effets de transitions css3 notament, seulement je ne veux pas encore le faire si certains visiteurs ne supportent pas encore ces nouvelles propriétés.

Merci d'avance pour vos aides

Bonjour,

je viens de lire un de vos dossiers ici : http://www.alsacreations.com/astuce/lire/996-amelioration-progressive-modernizr-et-selecteurs-css.html

Le problème c'est que malgrès ces techniques de "détection", les navigateurs récents utiliseront les transitions css3 mais chargeront quand même en fond Jquery.

En gros ce que je chercher c'est un moyen de faire ca :

- Si FF > FF4 ou IE > IE9 alors transitions css3 pour mon menu de navigation
- Si FF < FF4 ou IE < IE9 alors jquery pour mon menu de navigation

il faudra que j'utilise php alors ?
Mon but est comme vous l'aurez compris est clairement d'optimiser les temps de chargements pour les navigateurs les plus récents