Div Coupe image en background (HELP PLZ)
christophe.therrien
Messages postés
108
Statut
Membre
-
yusukessj Messages postés 297 Statut Membre -
yusukessj Messages postés 297 Statut Membre -
Bonjour, j'essaye de mettre dans mon site internet un lien avec une image qui passe de noir et blanc à toute coloré lorsque l'on "hover" par dessus. Jusqu'à présent ça marche. le seul problème est que le div ou je ne sais trop quoi empêche l'image de s'afficher au complet. Pour un example, vous pouvez aller visiter ma page : www.tarentule-fitness.com/chris/tarentule/nouveau/index.php et vous pouvez voir le code.
Je vous met le code quand même.
Html :
<div id="courriel-border" ></div>
<div id="courriel"><a href="#"><span style=" height:200px;">COURRIEL</span></a></div>
Css :
#courriel-border {
position:absolute;
left: 768px;
top: 1318px;
border-color:#FFFFFF;
border:dashed;
border-width:3px;
border-spacing:inherit;
width:140px;
height: 45px;
z-index:0;
color:#FFFFFF;
}
#courriel {
position:absolute;
top:1282px;
left:741px;
z-index:1;
overflow:visible;
height: 96px;
}
#courriel a {
width:167px;
height: 243px;
z-index:1;
color:#FFFFFF;
text-align:right;
padding-left: 50px;
background: url(timbre-gris.png) no-repeat;
overflow:visible;
}
#courriel a:hover {
z-index:1;
color:#FFFFFF;
text-align:right;
padding-left:50px;
background: url(timbre-couleur.png) no-repeat;
}
Je vous met le code quand même.
Html :
<div id="courriel-border" ></div>
<div id="courriel"><a href="#"><span style=" height:200px;">COURRIEL</span></a></div>
Css :
#courriel-border {
position:absolute;
left: 768px;
top: 1318px;
border-color:#FFFFFF;
border:dashed;
border-width:3px;
border-spacing:inherit;
width:140px;
height: 45px;
z-index:0;
color:#FFFFFF;
}
#courriel {
position:absolute;
top:1282px;
left:741px;
z-index:1;
overflow:visible;
height: 96px;
}
#courriel a {
width:167px;
height: 243px;
z-index:1;
color:#FFFFFF;
text-align:right;
padding-left: 50px;
background: url(timbre-gris.png) no-repeat;
overflow:visible;
}
#courriel a:hover {
z-index:1;
color:#FFFFFF;
text-align:right;
padding-left:50px;
background: url(timbre-couleur.png) no-repeat;
}
A voir également:
- Div Coupe image en background (HELP PLZ)
- Image iso - Guide
- Couper une image en 3 instagram - Guide
- Reduire taille image - Guide
- Légender une image - Guide
- Transformer une image en icone - Guide
1 réponse
Hello !
parlons du coté de Facebook :
CSS :
et du coté HTML :
Je vient d'ésséyer eet ça marche pour moi, je reste dans le coin si t'as des remarques ;-)
Cheers
parlons du coté de Facebook :
CSS :
.facebook {
position:absolute;
z-index:1;
top:1320px;
left:375px;
height:59px;
background: url(facebook-gris.png) no-repeat;
padding-left: 50px;
}
.facebook:hover {
background: url(facebook-couleur.png) no-repeat;
}
.facebook a {
width:100%;
height:100%;
z-index:1;
text-align:right;
padding-left:50px;
overflow:visible;
}
.facebook a:hover {
width:100%;
height:100%;
z-index:1;
text-align:right;
padding-left:50px;
}
et du coté HTML :
<a href="#" class="sous-titre"><div id="facebook" class="facebook">FACEBOOK</div></a>
Je vient d'ésséyer eet ça marche pour moi, je reste dans le coin si t'as des remarques ;-)
Cheers
