[JS] Afficher une image en fondu
Résolu
maxi-mang
Messages postés
168
Date d'inscription
Statut
Membre
Dernière intervention
-
maxi-mang Messages postés 168 Date d'inscription Statut Membre Dernière intervention -
maxi-mang Messages postés 168 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je sais que s'est quelque chose d'assez basique que je demande, mais malgré mes recherches, je ne trouve pas la source qui me convient =S ! Je ne développe pas JavaScript...
J'ai plusieurs images sur une même page accompagné d'un lien (<a href="site.php"><img src="img.png" alt="Image" id="site" /><br />Nom du site</a>). Elles ont comme opacité 60% (CSS). J'aimerai qu'au passage de la souris sur le lien (onmouseover), l'image aie 100% d'opacité et que lorsque on enlève la souris, l'opacité revienne à 60%, tout cela avec un joli effet en fondu.
Merci d'avance ;D,
Maxi-ManG
Je sais que s'est quelque chose d'assez basique que je demande, mais malgré mes recherches, je ne trouve pas la source qui me convient =S ! Je ne développe pas JavaScript...
J'ai plusieurs images sur une même page accompagné d'un lien (<a href="site.php"><img src="img.png" alt="Image" id="site" /><br />Nom du site</a>). Elles ont comme opacité 60% (CSS). J'aimerai qu'au passage de la souris sur le lien (onmouseover), l'image aie 100% d'opacité et que lorsque on enlève la souris, l'opacité revienne à 60%, tout cela avec un joli effet en fondu.
Merci d'avance ;D,
Maxi-ManG
A voir également:
- [JS] Afficher une image en fondu
- Légender une image - Guide
- Image iso - Guide
- Transformer une image en icone - Guide
- Mettre une image en filigrane sur word - Guide
- Couper une image en 3 instagram - Guide
2 réponses
Résolu, tant pis l'effet fondu :
HTML :
CSS :
HTML :
<div id="site"> <a href="site.php"> <img src="img.png" alt="Nom du site" /><br /> Nom du site </a> </div>
CSS :
#site img
{
border: 3px solid black;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
width: 100px;
height: 75px;
}
#site a:hover img
{
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}