Image sur image - CSS & PHP

Bonsoir,

Malgré mes recherchent ne correspondant pas à mes attentes, je me tourne vers votre communauté.

Mon problème n'est pas si simple que cela en a l'air, c'est un vrai casse-tête !
Je voudrais au survol de mon image, afficher une deuxième image !

Vous allez me dire qu'avec un :hover en CSS c'est simple, seulement malgré mes nombreux essaies, sa ne marche pas car je dois impérativement laisser le lien de l'image dans le HTML car celui-ci est en PHP.

Voici la ligne de code de mon image dans le document HTML :

<span class="img"><a href="gerer_album.php?url=<?php echo $data['url']; ?>" target="_blank">
     <img src="http://images.jupload.fr/<?php echo $dir.$data['url']; ?>" class="img" />
   </a></span>

Et le code CSS qui détermine simplement la forme et la taille de mon image :

body main .mid .img img {
    
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: 20px;
    border: 2px solid #c6c6c6;
    
}

Je vous remercie d'avance de votre aide et vous souhaite une bonne soirée

salut,
pour ma part je n'ai pas trop compris. Où est la deuxième image à afficher ? Quel est concrètement le problème ? Qu'as-tu déjà fait ?

Je pense m'être bien expliqué, j'ai déjà essayé le rollover CSS, le javascript mais sans succès..

Je veux simplement faire apparaitre une autre image au survol de la souris d'une image.