[Résolu] Zoom vignette avec transition à partir du coin bas/gauche

Bonjour les kiwis,

Pardon pour le titre un peu long mais pas facile à résumer ce que je voudrais faire : j'ai 3 vignettes alignées en bas d'une div. Elles doivent s'agrandir au survol de la souris.
Jusque là tout va bien, j'ai fait avec transition et la propriété width.

Seulement elles s'agrandissent par défaut depuis leur coin haut/gauche, c'est à dire vers le bas et vers la droite. Ça ne convient pas puisque mes vignettes sont en bas de page, donc il faut que les images s'agrandissent depuis leur coin bas/gauche, c'est à dire vers le haut et vers la droite.

Est-ce que c'est possible ? J'ai zappé une propriété nouvelle ou pas pensé à une astuce ?
Modifié par nimel (22 Mar 2012 - 21:01)

Tu peux modifier le point de pivot d'un élément en utilisant le positionnement absolu ou relatif avec les propriétés : left, right, top et bottom.
Modifié par jb_gfx (22 Mar 2012 - 21:37)

Yeah super ! C'était l'info qui me manquait. Mon élément était déjà en absolute mais je ne savait pas que le fait de fixer sa position changeait sont point de référence. En plus comme on utilise le plus souvent top et left on a tendance à oublier que bottom et right existent !!!

En conclusion ça marche avec ça :

.maclass {
	position:absolute;
	bottom:150px;
	z-index:60;
}

.maclass img {
	width:50px;
	}

.maclass img:hover, .maclass img:focus {
	top:-200px;
	width:300px;
	transition-property: width,height;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;	
}

(J'vous ai pas mis les -moz- etc... à rajouter)

Merci beaucoup jb_gfx