Transform scale

Bonjour à tous,

J'ai un petit souci par rapport au transform scale sur une image.
j'utilise le plugin WOWBOOK pour créer un flipflop. parmi les outils de ce plugin il y'a le Zoom, qui permet d'agrandir l'image correspondante.

Le zoom se fait via CSS3, grâce à transform scale ( -webkit-transform:scale(1.4); )
Le souci c'est que, quand on zoom, le text sur l'image est est flou, ce problème persiste sur Chrome + Safari.
Voir la pièce jointe pour les deux rendu

Avant zoom ( taille originale ) :


Apres zoom :


Avez-vous une idée pour régler ce problème ?
Quand j'essai de désactiver le scale via firebug, et je le réactive ( via case à cauche sur firebug ), l'image devient net et claire :


Merci pour votre aide,
Modifié par madridista (30 Apr 2013 - 19:03)

Bonsoir,

Les images ne s'affichent pas

Les textes que tu évoques sont du "vrai" texte ou une image ?
Dans le 2è cas, il n'est pas étonnant, voire normal, que l'image étant étirée devienne floue

Bonsoir,

Merci pour ta réponse.

Désolé, les images sont mal découpées et je me suis trompé de leur URL, mais en tout cas, les text dont je parle, ils sont inclus dans l'image.

Quand j'ai fait un autre test avec cet outil : SmothZoom, qui est basé sur le même principe ( Zoom via transform scale ), le text inclus dans les images n'est pas floue. J'ai regardé de près le code mais je vois pas trop de différence.

Merci,

Bonjour,

Je me permet d’écrire car je rencontre plus ou moins le même soucis.
j'ai mit en place dans mon CSS un effet de zoom au survol d'un bloc sur mon site
ce bloc contient une images et du texte a part de l'image dans une balise classique <p> et un titre en <h3> le soucis est que au survol de la souris le bloc s'agrandit parfaitement bien
mais mon texte et mon titre devienne flou
avait vous une idée pour éviter cela ?
ci-dessous le css :

.bloc_article					
{-webkit-transition: linear .3s;-moz-transition: linear .3s;-o-transition: linear .3s;-ms-transition: linear .3s;transition: linear .3s; overflow:hidden; margin-top:30px;}

.bloc_article:hover				
{-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; -moz-box-shadow: -2px 0px 10px #333333;
box-shadow: -2px 0px 10px #333333; -webkit-transform: scale(1.01);-moz-transform: scale(1.01);-o-transform: scale(1.01);-ms-transform: scale(1.01);}

Merci d'avance

Edit : après test j'ai l'impression que mon texte devient flou uniquement sous chrome et safari
Modifié par asempia (27 May 2013 - 15:00)