28172 sujets

CSS et mise en forme, CSS3

[RESOLU] [CSS] Loupe sur image en fondu au survol de l'image

Bonjour je bloque sur un sujet:
J'aimerais qu'au survol de l'image ma loupe ici en classe"fade" apparaisse doucement en transition sur mes éléments à cliquer.

J'imagine que c'est possible, mais meme en essayant les propriétés opacity et autres je n'y arrive pas...

Merci d'avance pour votre aide.

(ps: par contre j'ai bien reussi à faire l'inverse: loupe activé par défaut sur l'image de fond et disparition doucement en hover )

Exemple en cours: -->

Code HTML:
 <a href="http://www.xxx.fr/site/vignettes/image.jpg" rel="example_group" alt="starbox-MSBB"  title="Cliquez pour agrandir" ><div id="zonemsbb"  class="fade"></div> 
 </a>


/*EFFET LOUPE */



.fade:hover {

	/*EFFET cadre ombré pour firefox et autre
	-webkit-box-shadow: 0px 0px 4px #777;
	-moz-box-shadow: 0px 0px 4px #777;*/
	box-shadow: 0px 0px 4px #777\9;/*pour IE */ 
	background:url(jquery-image-rollover/images/mag.png) center center no-repeat;
	cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;

}

Modifié par masquelierc (27 Apr 2012 - 10:26)
Merci pour ta réactivité Smiley smile
Oui je vais etudier cette méthode, bien que cela paraisse assez complexes pour une simple animation Smiley ohwell
Mais on a rien sans rien ! Smiley cligne
Ce n'est pas forcément complexe...

Par exemple, pour ta loupe qui doit apparaître progressivement, tu peux t'inspirer de ce code TRES simple =)
<div>
    Ici, tu mets ton image, mais ça marche aussi avec ce texte [cligne]
</div>
div {
    opacity : 0;
    -moz-transition : opacity 0.5s linear;
}

div:hover {
    opacity : 1;
}
Ici, l'animation fonctionnera sur Firefox uniquement, je n'ai pas tout en tête, mais pour l'adapter à tous les navigateurs, tu auras très certainement au final quelque chose de ce type:
-moz-transition : opacity 0.5s linear;
-ms-transition : opacity 0.5s linear;
-o-transition : opacity 0.5s linear;
-webkit-transition : opacity 0.5s linear;
transition : opacity 0.5s linear;

Modifié par Gothor (15 Feb 2012 - 14:58)
Super !!
Un grand merci Gothor pour ton aide! Smiley confused

Ca marche parfaitement grâce à ton code Smiley smile



Je donne mon code de départ corrigé si ca peut en aider d'autres plus tard :



/*EFFET LOUPE */

.fade{
	
opacity : 0;
-moz-transition : opacity 0.5s linear;
-ms-transition : opacity 0.5s linear;
-o-transition : opacity 0.5s linear;
-webkit-transition : opacity 0.5s linear;
transition : opacity 0.5s linear;	
	}
	
	
.fade:hover{
opacity : 1;
box-shadow: 0px 0px 4px #777\9;/*pour IE */ 
background:url(jquery-image-rollover/images/mag.png) center center no-repeat;
	
	}

Modifié par masquelierc (27 Apr 2012 - 10:27)
Bonjour,

Ca fonctionne =) sous Firefox, Opéra et Chrome...
Je ne peux pas tester sous IE9, je ne l'ai pas au bureau, en revanche...
Je suis sûr que ça ne fonctionne pas sous IE8 !
Et je pense qu'il est impossible (sans JavaScript) de reproduire cet effet sous ce navigateur !

Tu devras utiliser quelque chose du type :
.fade {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
.fade:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
}
L'ordre est important semblerait-il, respecte le Smiley cligne

Ah mais ce n'est pas tout ! Sur IE7 (et 6 je crois), la pseudo-classe :hover ne fonctionne que sur les éléments a !
Donc, il faudra modifier ton code (qui de toute façon n'était pas très propre : on ne met pas un bloc dans un élément a)...

Tu pourrais commencer par remplacer tes:
<a href="tonimage.jpg" id="tonid" class="fade"></a>
par des
<a href="tonimage.jpg"><div id="tonid" class="fade"></div></a>

avec un petit :
.fade {
    display : block;
}
Bon, ça ne résout pas tout... Sous IE8, quand je mets le mode d'affichage de IE7, le lien est tout de même affiché, mais au moins, on sait qu'il y a quelque chose ici, une interaction.

Continuons donc ! Ton lien est vide (et c'est pas bon, ça), et ton image est porteuse d'information, donc elle doit être insérée dans ton code html !
<a id="zonemsbb" class="fade" href="http://www.boxop.fr/site/vignettes/starbox-meubles/starbox-MSBB.jpg" rel="example_group" alt="starbox-MSBB" title="Cliquez pour agrandir">
    <img src="jquery-image-rollover/images/mag.png" alt="Loupe">
</a>
Ne pas oublier le alt, il est important Smiley cligne

On avance ! Le problème, c'est que ta loupe s'affiche toujours en haut à gauche de ton lien =/
Qu'à cela ne tienne, nous allons la centrer !
.fade img {
    style="position: relative; /* On le place par rapport à sa position d'origine. */
    top: 50%; /* De la moitié de la taille du bloc vers le bas */
    left: 50%; /* De la moitié de la taille du bloc vers la droite */
    margin-top: -26px;" /* De la moitié de la taille de l'image vers le haut */
    margin-left: -24px; /* De la moitié de la taille de l'image vers la gauche */
}
Voilà, je crois qu'on a pas mal avancé =) Il y a sûrement encore des choses à faire, mais ça me semble déjà plus correct =)
Sujet clos
Aller à