28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous

Je cherche à agrandir une image sans occulter le texte voisin. J'ai créé un container où je charge une image flottante à gauche, puis le texte, qui s'affiche bien entendu à droite (et en dessous). soit dans le html5 :
<div class="container">
		<div class="photo">
		<img src="EssaisdeZoom/media/Q2008_70ans_thumb.jpg" width="256" alt="bateau" />
		</div>
		
		<p>bllablaa....</p> 
</div>


En CSS3 :
.photo  {
	margin:10px;
	border: solid blue 1px;
	float:left;
	}
.container {
	width: 80%;
	}
.photo :hover {
		zoom: 1.5;
	}
.photo:active {
	zoom: 1.3;
	]


Résultats:
avec Chrome : tant que le facteur de zoom reste faible, le résultat est atteint : le texte s'écarte de l'image agrandie. Quand il augmente, l'image déborde du container en bas. hover et active fonctionnent.
avec IE11: hover fonctionne, mais pas active apparemment; le teste reste à sa place primitive et est recouvert partiellement par l"image agrandie.
sous Firefox : aucune réponse à hover ou active .

Question(s) : 1/ un préfixe existe-t-il pour que Firefox reconnaisse zoom ?
2/ dans le cas de Chrome, comment éviter que l'image déborde lorsque la hauteur de l'image agrandie est supérieure à celle du texte ?
3/ peut-on réaliser l'effet recherché sur les trois navigateurs en utilisant une transformation avec scale ? Je dois dire que j'ai essayé, sans succès, mais connaissant mon niveau de compétences, cela peut ne pas être dû au CSS Smiley cligne .

Merci à tous ceux qui voudront bien me conseiller.
salut,
"zoom" est propriétaire de IE et ne fait pas partie des standards. Le mieux serait de passer, comme tu l'as suggéré, par "scale".
Tu peux toujours utiliser des positionnement absolues sur l'image et passer par un simple "width/height".
Zelalsan a écrit :
salut,
&quot;zoom&quot; est propriétaire de IE et ne fait pas partie des standards. Le mieux serait de passer, comme tu l'as suggéré, par &quot;scale&quot;.
Tu peux toujours utiliser des positionnement absolues sur l'image et passer par un simple &quot;width/height&quot;.


Merci de ta réponse. J'avais plutôt l'impression que "zoom" était spécifique de Chrome, avec lequel j'obtiens de meilleurs résultats, mais en tout cas tu confirmes mes craintes de ne pas pouvoir l'utiliser avec Firefox.

Je vais réessayer avec "scale", mais c'est pas gagné Smiley eek