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 :
En CSS3 :
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 .
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 .
Merci à tous ceux qui voudront bien me conseiller.
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 .
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 .
Merci à tous ceux qui voudront bien me conseiller.