28172 sujets

CSS et mise en forme, CSS3

Hover & Images

Bonsoir,

je cherche à l'heure actuelle à charger une image lors du survol d'un lien.

J'ai donc 
<a class="class" id="id1" href="mon lien/"><!-- content --></a>


Et mon CSS 
#class:hover
{
background-image: url('images/hover/monimage.png');

}


Tout en sachant que l'image doit venir en surcouche du background total du site internet...
Si je me suis mal exprimé, n'hésitez pas à me le dire.

Merci pour tout et bonne soirée =)
Hello,

Alors pour ton soucis j'ai une solution, jouer avec le 'before' de la balise a


.test{
		position: relative;
		
		&:before{
			position : absolute;
			content : url(path/img)
			opacity: 0;
		}

		&:hover::before{
			opacity: 1;
			top : 100%;
		}
	}


Mon code est en sass mais tu ne devrais pas avoir de problème à le comprendre, pour bouger l'image il faut que tu joues avec les règles appliquées sur hover::before.

Là c'est gênant car il faudra que tu mettes l'url dans le css à chaque fois... Si tu as 100 photos... OMG
Le mieux est d'imbriquer une div à ton lien et à l'afficher de la même façon (comme ça l'url de l'image sera en dur dans ton html)

Bref j'espère avoir été clair

A++
Merci pour ta solution, tu as été très clair mais ça ne marche pas ^^

Enfin, ça doit être moi qui ne fait pas les choses dans le bonne ordre. Ça donne donc : 


<div id="id1">
<a class="nonb" id="id1" href="mon lien/"><!-- cont --><p>news</p></a>
     <a class="nonb" id="id2" href="http://monlien"><!-- content -->ddd</a></div>


Et 

.id1{
		position: relative;
		
		&:before{
			position : absolute;
			content : url(path/img)
			opacity: 0;
		}

		&:hover::before{
			opacity: 1;
			top : 100%;
		}
	}


mais ça ne marche pas... Je n'ai pas l'habitude de demander via des forums, donc si jamais on pouvait échanger sur skype ou autre ce serait cool Smiley cligne
Mais je mettrais la réponse à la fin evidemment
Modifié par Nostel (15 Dec 2014 - 00:44)
Tu utilises sass ? C'est un préprocesseur CSS en faite il te permet d'écrire du code CSS plus simple (je trouve) et de le compiler en CSS.

Là ce que tu as marqué ne marche pas il faut bien que tu mettes



.id1{
       position: relative;
}

.id1::before{
	position : absolute;
	content : url(path/img)
	opacity: 0;
}

.id1:hover::before{
	opacity: 1;
	top : 100%;
}


Je mettrai le code CSS généré plus tard, faut que je bosse de la gestion là Smiley biggol
Modifié par GameTag (15 Dec 2014 - 23:50)
Nostel a écrit :
je cherche à l'heure actuelle à charger une image lors du survol d'un lien.

Ton image est-elle uniquement décorative ou fait partie du contenu ? Dans le premier cas, l'image peut doit être géré via le css, dans le second cas il faut qu'elle soit dans ton code html.
Elle fait parti du contenu, mais non visible jusqu'au survol. En gros, je modifie le background du site internet a chaque survol
Sujet clos
Aller à