Positionner un bloc image :hover plus gros que l'image inactive

Bonjour,

Je me tire les cheveux pour placer une image :hover correctement sachant que cette derniere est plus grande que l'image (Out) inactive. Et les valeurs negative en bottom et left ne sont pas pris en compte.
Le background-position tronque mon image. Bref existe t'il un moyen de pallier à ce probleme?

L'image en :hover actuelle est correctement positionner en 0(bottom), 0(left) par rapport à son parent à savoir l'image incative mais etant donné quelle est plus grosse. Cela créé un decalage et ne supperpose pas les deux images.

Hello,

Tu as essayé des valeurs négatives pour top, left, etc.? Du genre top:-20px;left:-20px; si ton image est plus haute et plus large de 40px.

Hello,

C'est bien ce que j'ai souligné:

"les valeurs NEGATIVES en bottom et left ne sont pas pris en compte". Il en va de soit avec right et top.

En tout cas tu as bien compris ce que je souhaitais faire.

J'ai mis l'image inactive avec une "position:absolute", ainsi que l'image en :hover. Mais on dirait que les valeurs négatives pour positionner mon image :hover ne sont pas prit en compte, peut être que même avec une position:absolute, l'image:hover ne sort pas du flux, et reste rattaché à son parent à savoir l'image inactive, cela expliquerait pourquoi les valeurs négatives ne changent strictement rien.

J'ai trouvé une solution de contournement, je me suis arrangé pour que les deux images est la même dimension. Le point de fuite étant en haut à gauche pour les deux, ils se superposent dorénavant correctement.

Mais tout de même si à l'avenir je sois "forcé" d'avoir une image au survol beaucoup plus grosse que mon image inactive comment pourrais-je m'y prendre? il n'y a pas une propriété css qui permet de faire cela?
Modifié par shakuro (08 Nov 2011 - 16:53)

shakuro a écrit :
C'est bien ce que j'ai souligné:
"les valeurs NEGATIVES en bottom et left ne sont pas pris en compte". Il en va de soit avec right et top.

Bah tu dois te planter quelque part parce que ça marche dans tous les navigateurs cette histoire de valeurs négatives, et on utilise ça couramment.

Plus généralement: tu nous parles d'image parente, d'image en :hover, d'image inactive (et je passe sur le coup du point de fuite qui m'a laissé perplexe)... mais on n'a pas la moindre idée:
- de la structure HTML utilisée;
- du code CSS appliqué.
Donc difficile de te répondre quoi que ce soit.

Comme le dit le dicton: pas de code, pas de chocolat.

shakuro a écrit :
Mais tout de même si à l'avenir je sois "forcé" d'avoir une image au survol beaucoup plus grosse que mon image inactive comment pourrais-je m'y prendre? il n'y a pas une propriété css qui permet de faire cela?

Faut voir le design et l'effet souhaité. Il y a pas mal de possibilités, certaines posant des parfois des problèmes d'accessibilité. Mais tout dépend de ce qu'on veut faire au juste.

Donc la prochaine fois tu peux préparer une page de test qui expose ton problème ou ton code actuel, préparer aussi quelques images ou extraits de maquette graphique qui montrent le résultat souhaité, et demander des conseils avec ces éléments concrets à montrer.

a écrit :
Bah tu dois te planter quelque part parce que ça marche dans tous les navigateurs cette histoire de valeurs négatives, et on utilise ça couramment.

J'ai pourtant essayé à mainte reprise sans le moindre succès, et je t'assure que ça m'a étonné, c'est d'ailleurs pour cela que j'ai créé un sujet sur ce soucis là.

Voici la page test sur laquelle j'ai travaillé mon carrousel, mon soucis concernait les flèches "RETOUR" "SUIVANT" du carrousel, au :hover j'avais un fond bleuté relativement plus étendue que celui actuellement, c'était cette image qui était plus grande que l'image inactive (j'appel image inactive l'image sur laquelle je ne suis pas en :hover)

Page Test

le lien du fichier css ICI

Donc comme dit précédemment j'ai du réduire l'effet de blur à l’arrière des flèches pour que les deux images est la même dimension.

Lorsque je parle de point de fuite, il s'agit d'une aberration de ma part et je m'en excuse, je voulais désigner l'endroit (point d'origine) par défault où se place un élément dans l'espace lorsqu'on ne lui attribue pas de valeur.

Enfin merci beaucoup !