Overlay en css

J’explique : j’ai des images, a une taille donnée et à priori fixes. Je souhaite afficher SUR cette image, une autre image, plus petite, pour la qualifier (la première image, je sent que je vous perds). J’ai essayé avec du position:relative, mais il reste le “vide” du block d’origine, ce qui ne me va pas. J’ai aussi essayé de faire l’inverse à savoir un truc du genre :

[code]<div style="background:url(“magrosseimage.jpg”)>

[/code] Mais cela ne me va pas, puisque pour avoir le lien sur la "grosse" image, il faudrait que je rajoute un onclick sur le div, avec un changement de curseur sur le hover, et ca complexifie trop le bousin. La seule solution qu'il me reste pour l'instant, ca serait de générer ca via du code, mais avec un peu de bol, l'un d'entre vous aura une solution magique pour le faire en css (mais j'en doute).

Merci d’avance ^^

Tiens, j’avais déjà eu un problème similaire en fait.
Et le coup du bloc “manquant” (laisser vide par l’image) c’est assez lourd ouais. T’as les “trucs a la con” comme mettre toutes ces images a la fin du source, ou des trucs dans le genre, mais c’est lourds quand même.

Sinon, je m’étais amuser de mettre en place de la “superposition” avec des png transparent (pour faire “boooww”), si jamais ca peut t’inspirer : http://ks35314.kimsufi.com/haza/test/ (le "resizer.php est dispo aussi http://ks35314.kimsufi.com/haza/test/resizer.txt )

[quote=« Hazadess, post:2, topic: 36520 »]Tiens, j’avais déjà eu un problème similaire en fait.
Et le coup du bloc « manquant » (laisser vide par l’image) c’est assez lourd ouais. T’as les « trucs a la con » comme mettre toutes ces images a la fin du source, ou des trucs dans le genre, mais c’est lourds quand même.

Sinon, je m’étais amuser de mettre en place de la « superposition » avec des png transparent (pour faire « boooww »), si jamais ca peut t’inspirer : http://ks35314.kimsufi.com/haza/test/ (le "resizer.php est dispo aussi http://ks35314.kimsufi.com/haza/test/resizer.txt )[/quote]
Merci pour la réponse, hélas cela correspond à ma solution dans le code, donc pas exploitable. Par contre j’aime bien le résultat final :slight_smile:

il y a des techniques qui pourraient amrcher avec une position en absolute, puisqu’en réalité un positionnement absolu ne l’est que par rapport au premier parent lui-même absolu.

plus clairement: en mettant ton image dans une positionnée en absolu, son positionnement se fera par rapport à celui de cette div. sachant que la position de la div ne bouge pas si on ne précise pas top left right ou bottom, la position de l’image se retrouve alors relative à son emplacement d’origine, et ce sans réserver son bloc.

[quote=“Rabban, post:4, topic: 36520”][…]
plus clairement: en mettant ton image dans une positionnée en absolu, son positionnement se fera par rapport à celui de cette div. sachant que la position de la div ne bouge pas si on ne précise pas top left right ou bottom, la position de l’image se retrouve alors relative à son emplacement d’origine, et ce sans réserver son bloc.[/quote]On m’enlève les mots de la bouche !
J’approuve totalement.

Coucou Bishop,

J’ai pondu ça en vitesse, je ne sais pas si c’est de ça que tu as besoin, n’hésites pas à me chopper sur MSN si t’as besoin.
On verra ça :slight_smile:

http://www.phobosky.net/Css_Tips/

[code]
a:link {background:url(big.jpg)top left; float:left; width:400px; height:400px; cursor: hand;}
a:visited {background:url(big.jpg)top left; float:left; width:400px; height:400px; cursor: hand;}
a:hover {background:url(big.jpg)top left; float:left; width:400px; height:400px; cursor: hand;}
a:active {background:url(big.jpg)top left; float:left; width:400px; height:400px; cursor: hand;}

img.BigImage {position:relative; left:100px; top:50px;}
[/code]

<a href="http://www.google.com"> <img src="small.png" alt="Image" width="200" height="300" border="0" class="BigImage" /> </a>

Merci phobo, je vérifie lundi au taf que ca va bien marcher dans mon cas à la con d’a moi, mais je ne vois pas ce qui pourrais merder. Merci également pour la suggestion avec de l’absolute, je me la garde sous le coude, sais t’on jamais. Dans tous les cas j’update lundi pour dire si c’est résolu ou pas.