Apparition en hover...
JorisShephard
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
j'ai une image comme celle-ci : http://img209.imageshack.us/img209/7239/kem3.jpg
J'aimerais qu'à la base en retouchant le code, elle apparaisse comme ceci :
http://img196.imageshack.us/img196/4025/t5pp.png , donc rajout de BG et de shadow, à la limite je suis capable de le faire,
MAIS, et c'est la que je bloque depuis 3 jours, j'aimerais qu'au survol, elle apparaisse comme ça :
http://img841.imageshack.us/img841/311/f50r.png , donc avec une opacité moindre, et un petit plus au milieu (qui est une petite image png), et que tout ça apparaisse en léger fondu.
Je bloque depuis 3 jours, et je n'arrive pas du tout à faire ça, si une âme chritable pourrait essayer de trouver un code ce serait génial...
Merci d'avance !
j'ai une image comme celle-ci : http://img209.imageshack.us/img209/7239/kem3.jpg
J'aimerais qu'à la base en retouchant le code, elle apparaisse comme ceci :
http://img196.imageshack.us/img196/4025/t5pp.png , donc rajout de BG et de shadow, à la limite je suis capable de le faire,
MAIS, et c'est la que je bloque depuis 3 jours, j'aimerais qu'au survol, elle apparaisse comme ça :
http://img841.imageshack.us/img841/311/f50r.png , donc avec une opacité moindre, et un petit plus au milieu (qui est une petite image png), et que tout ça apparaisse en léger fondu.
Je bloque depuis 3 jours, et je n'arrive pas du tout à faire ça, si une âme chritable pourrait essayer de trouver un code ce serait génial...
Merci d'avance !
A voir également:
- Apparition en hover...
- Apparition d'extraits audio (virus ?) ✓ - Forum Virus
- Comment faire pour pour non apparition du num - Forum Mobile
- Apparition d'images en fontion d'une liste déroulante ✓ - Forum Excel
- Apparition triangle rouge dans cellule ✓ - Forum LibreOffice / OpenOffice
- Apparition de carrés noirs sur l'écran - Forum Virus
3 réponses
Plutot que de donner des propriétés css à l'image, crée les deux images telles que tu voudrais qu'elles soient. Mettont que celle par défaut s'appele "AAA.jpg" et que celle à afficher au survol soir "BBB.jpg".
Vu que l'on va utiliser la fonction "hover", on va devoir tricher un peu:
HTML:
Voila, si je ne me suis pas trompé, ça marche.
En gros, du places une baliste factice, et via un code CSS, tu lui donne un arrière-plan en précisant sa hauteur et sa largeur (ceux de l'image, sinon elle sera rognée ou il y aura du vide autour).
Grâce au "hover", tu assignes un arrière-plan différant.
PS: Pour palier d'éventuels problemes de positionnement/déplacement; essaye ça:
PS2: Dans le hover, n'écris que ce qui dois changer, pas besoin de repréciser inutilement le reste.
Vu que l'on va utiliser la fonction "hover", on va devoir tricher un peu:
HTML:
<div class="mon_image"></div>CSS:
.mon_image
{
background-image: urtl('AAA.jpg') no-repeat; /* On définis l'image souhaitée en arrière-plan */
width: 314px; /* On donne la largeur pour être sur que l'image soit affichée en entier */
height: 304px; /* La hauteur... */
}
.mon_image:hover
{
background-image: urtl('BBB.jpg') no-repeat; /* On définis l'arrière-plan du survol */
}
Voila, si je ne me suis pas trompé, ça marche.
En gros, du places une baliste factice, et via un code CSS, tu lui donne un arrière-plan en précisant sa hauteur et sa largeur (ceux de l'image, sinon elle sera rognée ou il y aura du vide autour).
Grâce au "hover", tu assignes un arrière-plan différant.
PS: Pour palier d'éventuels problemes de positionnement/déplacement; essaye ça:
.mon_image
{
text-align: center;
vertical-align: center;
background-position: center;
}
PS2: Dans le hover, n'écris que ce qui dois changer, pas besoin de repréciser inutilement le reste.
