28172 sujets

CSS et mise en forme, CSS3

Faire apparaître un png au survol d'une image

Salut à tous,

mon problème est simple, mais je n'arrive pas à trouver la solution... En fait j'aimerais qu'au survol d'une image avec la souris, apparaîsse une autre image par-dessus la première. Que les deux se superposent : il y en a une de base, et au survol, un png se rajoute par-dessus pour créer un effet (de surbrillance de l'image en l'occurrence).

Voilà mon bout de code, qui ne fonctionne pas... :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test de surbrillance</title>

<style type="text/css">
img:hover{
background:url("http://blablabla.fr/images/effet.png") no-repeat scroll 0 0 transparent;
}
</style>
</head>

<body>

<img src="http://blablabla.fr/images/gateau.jpg" alt="">

</body>
</html>



L'idée est donc que par-dessus l'image gâteau (qui s'affiche sans problème), se rajoute au survol de la souris l'image effet.png, par dessus la première.

Même en mettant un z-index à 10 pour img:hover{}, ça ne change rien. Pourtant en appliquant un border sur le img:hover il y a bien une bordure qui apparaît au survol. Bref, comment m'y prendre ?


Merci beaucoup ! Smiley smile
Modifié par effelo (19 May 2011 - 16:42)
salut,

vite fait, tu ne pourrais pas plutôt, pour l'image que tu affiches avec la pseudo-classe :hover, faire une image qui serait en faire une composition "du gateau + l'effet" ?
celle ci se substituerait à gateau.jpg au survol de l'élément.

A+

je viens de voir que tu écris img:hover ... tu définies ça pour toutes les images de la page ?
et ça ne serait pas mieux d'utiliser un élément de type div pour ton cas ?
Modifié par o06 (19 May 2011 - 17:14)
En fait si ça fonctionne mais je pensais que non car le png d'effet reste masqué derrière la première image au lieu de se superposer dessus (je l'ai remarqué en agrandissant les dimensions). J'ai beau essayé de jouer avec le z-index ça ne donne rien (je m'y prends peut-être mal...)

Pour te répondre, en fait, j'ai pensé à ta solution de faire une image qui soit la composition de l'image plus de l'effet, mais cela implique d'alourdir franchement le code et surtout le travail en amont, car je voulais appliquer ce png d'effet sur un paquet de photos de mon site. Si je pouvais utiliser un unique png, pour appliquer cet effet à toutes les photos, ce serait l'idéal.


Sinon, je ne définis pas ça pour toutes les images de la page, mais c'était pour simplifier le code, et voir ce qui ne fonctionnait pas. Ensuite quand ça marchera avec toutes les images, je réduirai "l'impact" de ce :hover

Des conseils pour faire passer devant le png "effet" par rapport à mon image "gateau.jpg" ?


Merci!
Salut,

A noter qu'un background, comme son nom l'indique vient se placer derrière les éléments.
Du coup on voit pas ton effet "hover" voulu.
Pour ma part je te suggère la solution o06.

A plus Smiley smile
Pour la solution de 006, je ne vois pas trop non plus comment faire car l'image préalablement combinée ne se substituera pas à la première, mais restera toujours en arrière-plan.

Et c'est vrai que j'aimerais vraiment arriver à faire cela sans, à chaque fois que je rajoute du contenu sur mon site me taper l'étape de combiner l'effet voulu avec l'image et l'uploader sur le site..., c'est une énorme perte de temps.

Je suis sûr qu'on peut arriver à le faire plus simplement (un seul png d'effet qui s'applique partout où on le décide): j'ai trouvé un exemple ici : en survolant les livres, c'est toujours le même png qui agit et créée un effet de surbrillance. Qu'en pensez-vous?

Des idées ?

Merci en tout cas pour vos réponses! Smiley cligne
Modifié par effelo (19 May 2011 - 18:13)
on peut faire l'effet du site de livre grâce aux propriétés d'ombre portée du CSS3 : border-shadow
a écrit :
on peut faire l'effet du site de livre grâce aux propriétés d'ombre portée du CSS3 : border-shadow


Le problème est que mon fond étant très clair, la propriété box-shadow ne se voit pas sauf si je mets une ombre foncée (alors que j'aimerais un effet blanc).

Par ailleurs, j'aimerais que l'effet soit de la taille de l'image, dans l'image, et n'en dépasse pas... (donc pas tout à fait comme le livre finalement). En fait, l'idéal serait d'utiliser la valeur inset de la propriété box-shadow, mais elle ne fonctionne pas quand je la mets dans mon code... (est-ce que ça ne marche pas avec les images?)


Sinon j'ai trouvé peut-être une autre piste mais bizarrement avec celle-ci, l'effet ne s'applique qu'à une seule image, et à aucune des autres. Et de plus, l'image n'est plus cliquable... :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test de surbrillance</title> 
</head> 
 
<body> 
 
<div class="effetsurbrillance"></div>
<a  href="http://blablabla.fr/images/hq_gateau.jpg"><img class=imgeffect src="http://blablabla.fr/images/thumbnail_gateau.jpg" alt=""></a> 
<a  href="http://blablabla.fr/images/hq_poney.jpg"><img class=imgeffect src="http://blablabla.fr/images/thumbnail_poney.jpg" alt=""></a> 
<a  href="http://blablabla.fr/images/hq_girafe.jpg"><img class=imgeffect src="http://blablabla.fr/images/thumbnail_girafe.jpg" alt=""></a> 

</body> 
</html>




<style type="text/css">
.imgeffect{
position:relative;
z-index:1;
}
.effetsurbrillance{
position:absolute;
z-index:1000;
width:100px; /* largeur de mon effet png et de mon image thumbnail */
height:100px; /* hauteur de mon effet png et de mon image thumbnail */
}
.effetsurbrillance:hover{
background:url("http://blablabla.fr/images/brillance-vignette.png") no-repeat scroll 0 0 transparent;
}
</style>



Merci encore pour votre aide Smiley cligne . Surtout si vous avez des pistes pour l'inner shadow en CSS3 sur une image.
Modifié par effelo (23 May 2011 - 13:07)
Tu peux gerer cela grace un javascript appellé dans ta feuille de style qui s'applique non seulement à tes images (via <img>) et aussi à ton CSS .

Ce script s'apelle IE PNG Alpha Fix v2.0 Alpha 4 .
http://www.twinhelix.com/css/iepngfix/demo/

C'est version 2 alpha par contre.
Modifié par Vincent_nk (24 May 2011 - 02:20)
Vincent_nk a écrit :
Tu peux gerer cela grace un javascript appellé dans ta feuille de style qui s'applique non seulement à tes images (via &lt;img&gt;) et aussi à ton CSS .

Ce script s'apelle IE PNG Alpha Fix v2.0 Alpha 4 .
http://www.twinhelix.com/css/iepngfix/demo/

C'est version 2 alpha par contre.


Ce script n'est-il pas dédié à Internet Explorer ? Je suis sur Mac.


Arialia a écrit :
Euh décidément le CSS est assez riche , peut-être que box-shadow te conviendra :
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/


En fait, j'aurais aimé éventuellement me servir de box-shadow mais comme je l'ai expliqué plus haut, uniquement avec la propriété inset (car je voudrais une lueur interne, et pas une ombre portée. Question d'esthétique). Et la propriété inset ne fonctionne pas sur une image apparemment...

Personne n'a d'idées sur pourquoi la piste que j'évoque dans mon post du 23/05 à 13:06, ne fonctionne pas pleinement ? Une seule image se voit superposer le png, et pas les autres, et n'est plus cliquable...
Modifié par effelo (24 May 2011 - 16:14)
en fait avec box-shadow ce que tu peux faire c'est mettre une ombre portée interne à toutes tes images et lors du hover ne pas en mettre.

j'ai rajouté ça au css de Gallagher : 
.drop-shadow:hover {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
j'adore firebug ...

ah oui le coup de l'image au dessus ? normal le navigateur traite la zone de la souris par calque , si l'évenement est capturé par une zone du calque même s'il n'y a aucune action les autres calques ne sont pas parcourus.

et un calque avec le z-index <0 ne traite jamais les événements souris ....

donc un objet au dessus d'un autre empêchera ce dernier de capturer la souris ...
Modifié par Arialia (24 May 2011 - 19:07)
effelo a écrit :
Personne n'a d'idées sur pourquoi la piste que j'évoque dans mon post du 23/05 à 13:06, ne fonctionne pas pleinement ? Une seule image se voit superposer le png, et pas les autres, et n'est plus cliquable...


Ton image "survol" fait 100x100px, je ne connais pas la taille de celle en dessous, mais j'imagine qu'elle la recouvre entièrement. Donc elle cache le lien.

effelo a écrit :
<div class="effetsurbrillance"></div> 
<a  href="http://blablabla.fr/images/hq_gateau.jpg"><img class=imgeffect src="http://blablabla.fr/images/thumbnail_gateau.jpg" alt=""></a>  
<a  href="http://blablabla.fr/images/hq_poney.jpg"><img class=imgeffect src="http://blablabla.fr/images/thumbnail_poney.jpg" alt=""></a>  
<a  href="http://blablabla.fr/images/hq_girafe.jpg"><img class=imgeffect src="http://blablabla.fr/images/thumbnail_girafe.jpg" alt=""></a>


je ne vois qu'un seul " <div class="effetsurbrillance"></div> "
Modifié par fufu (24 May 2011 - 19:04)
effelo a écrit :
Ce script n'est-il pas dédié à Internet Explorer ? Je suis sur Mac.


Je ne savais pas que tu etais sur Mac, d'ailleurs sur quel navigateur Mac le PNG ne marche pas ?

A+
Salut,
Le png fonctionne toujours sur mac, même avec explorer Mac... qui n'est sûrement plus utilisé.

Pour ton problème particulier, j'ai cru comprendre en lisant ton code que tu veux "hilighter" (barbarisme maison Smiley confus ) tes vignettes au survol de la souris.

Si tes vignettes font la même taille, ou si tu as plusieurs tailles standard, tu peux créer 1 seul highlight (ou quelques uns) à appliquer sur n'importe quelle vignette... je crois que c'est ce que tu demandes.

Dans ce cas, c'est au background du lien qu'il te faut affecter l'image, et à la balise img que tu dois affecter le png de survol.

Je t'ai fait un petit exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test de surbrillance</title> 
 
<style type="text/css"> 
a.image1, a.image2, a.imageN {
	display: block;
	width: 150px;
	height: 150px;
}
	
a.image1 { background:url("../images/image1.jpg") no-repeat 0 0 transparent;  } 

img.surligne { visibility:hidden; }

a:hover img.surligne { visibility:visible; }
</style> 
</head> 
 
<body> 
 
<a href="http://bigImage.jpg" class="image1"><img src="surligne.png" alt="" class="surligne" /></a>
 
</body> 
</html>


Comme tu le vois, c'est la classe de a qui va charger l'image en fond, la balise img a toujours la même src.

En espérant que cela t'aide... pour ie6 et sa gestion calamiteuse des png, il faudra ajouter des hacks, mais ceux-ci sont bien connus et tu peux les trouver sur ce site.

Cela marche en css2 et avec n'importe quel navigateur (normalement), le :hover sur img n'est pas reconnu partout, mais là, c'est bien un :hover sur a qui est détecté.
Modifié par Paskaracal (27 May 2011 - 18:43)
Sujet clos
Aller à