Comment faire pour avoir une image avec css filter:blur et des bords coupants?

Je voudrais un flou de l'image lors du survol.

Le problème c'est que les bords de l'image aussi flou désagréable.
En coulisse on peut voir clairement avec le fond vert.

Si j'avais l'échelle de l'image c'est à dire la version 1.2, il serait résoudre le problème à la fin, mais pendant la transition, l'bords flous apparaissent toujours.

Toutes les idées comment ont des bords tranchants avec cet effet?

http://jsfiddle.net/d8Njs/

html:

<div class="item">
   <img src="http://placekitten.com/300"/>
</div>

css:

.item {
overflow: hidden;
width:300px;
height: 300px;
background: green;
}

.item img{
transition:all .5s ;
}

.item img:hover{
-webkit-filter: blur(5px);
/*skaling the image would help, but it still looks bad during the transition
-webkit-transform:scale(1.2); */
}

Fascinant de problème de bug dans Webkit il me semble.
Même question dans le stackoverflow.com/questions/12224320/... de référence.
Mise à l'échelle avec -webkit-transform:scale(1.0) semble comme il devrait être plus efficace que la 1.2... mais, bien qu'il ne garder les arêtes nettes, il ne fait rien à propos de l'désagréable vert effet que se forme autour de l'image au cours de la transition.

OriginalL'auteur Ketri | 2013-06-20

css

5

Les techniques que je connais, joliment expliqué à http://demosthenes.info/blog/534/Crossbrowser-Image-Blur:

1..Si vous avez une image qui a la même couleur sur tout le pourtour, comme dans l'exemple ci-dessus, vous pouvez définir la couleur d'arrière-plan du corps ou d'un élément de conteneur de la même couleur. (Pour info; ne s'applique pas à vous, du moins pas dans votre violon).

2..l'Utilisation de la propriété clip pour rogner les bords de l'image. le clip est toujours indiquées dans l'ordre suivant:

clip: rect( top, offset of right clip from left side, offset of bottom from top, left)

Pour l'exemple ci-dessus, l'image est 367px de large × 459 pixels de haut et le flou de 2 pixels, de sorte que le clip serait:

clip: rect(2px,365px,457px,2px);

(À noter que le clip n'est appliqué qu'aux éléments qui ont position: absolute appliquée. Si vous vouliez obtenir du soutien dans IE8 et plus tôt, n'oubliez pas de passer le px sur la fin de l'valeurs). (Aucune idée si vous êtes à la pose des photos dans une pile, d'une grille, ou tout simplement des légendes, etc. Pourrait être plus approprié si vous pouvez avaler le positionnement absolu.)

3..Envelopper l'image dans un contenant (un , par exemple) qui est légèrement plus petit que l'image, l'application overflow: hidden à l'extérieur de l'élément et le déplacement de l'image vers la gauche et vers le haut légèrement pour éliminer le visible flou sur les bords.

--

Aussi, en jetant une bordure autour de l'image semble aider au moins dans Webkit, mais je n'ai pas testé beaucoup.
```
.item img{
    transition:all .5s ;
    border:1px solid #000;
}
```
Merci!!!! Malheureusement, les bords flous apparaissent au cours de la transition, même si elles disparaissent à la fin à cause de l'écrêtage ou un conteneur plus petit que l'image etc.
L'ajout de la frontière ne supprimer les bords flous.
+1 pour l'ajout de la frontière. Note de la frontière peut être réglé pour transparent et travaille toujours le même.
la frontière hack ne fonctionne plus codepen.io/anon/pen/mymyrG

OriginalL'auteur

Semble que l'établissement d'un clip résout plus ou moins le problème. Cependant, il y a un étrange effet à la fin de la transition. Forcer th GPU (via un translateZ hack) semble résoudre le problème.

CSS

div {
    width:300px;
    height:300px;
    position: absolute;
}
.no {
    left: 400px;
    top: 10px;
}

.box img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
    -webkit-transform: translateZ(0px);
}
div img {
   transition: 2s -webkit-filter;
   position:absolute;
   left: -3px;
   top:-3px;
    clip: rect(5px 295px 295px 5px);
}

div img:hover{
    -webkit-filter: blur(8px);
}

démo avec un comparatif avec et sans le transformer

OriginalL'auteur vals

2

Après avoir passé la journée sur ce, j'ai été en mesure de créer une merde, le laid, le hacky solution.
Ne sera probablement pas l'utiliser dans le projet real, mout, peut-être qu'il pourrait inspirer à quelqu'un d'utiliser quelque chose dans ma solution, mais de le rendre un peu moins moche.
Au moins le résultat final ressemble à la façon dont je voudrais que ce!

À l'aide d'une bordure blanche et box-sizing: border-box, et alors que certaines marges, j'ai été en mesure d'obtenir le résultat final ont des bords tranchants, et les 3/4 des bords pour ne pas montrer le fond vert pendant la période de transition. Si quelqu'un veut savoir pourquoi certains bords fondu avec le fond au cours de la transition, que serait probablement aide.

http://jsfiddle.net/fVNqm/2/

html:
```
<div class="box">
    <img src="http://placekitten.com/300" />
   <div class="tophack"></div>
</div>
```
CSS:
```
.box{
box-sizing: border-box;
position:relative;
border:3px solid white;
overflow: hidden;
background:green;
width:300px;
height:300px;
}

div img {
transition:.2s all;
position:absolute;
left: -3px;
top:-3px;
}

div img:hover{
filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}

.tophack{ 
background:white;
width:300px;
height:3px;
z-index:10;
position:absolute;
top: 0px;
}
```
Toujours l'espoir pour quelque chose de mieux!

OriginalL'auteur Ketri
0

ajouter ceci dans votre css
```
.item img{margin:0px 0px 0px -1px;} 
```
OriginalL'auteur Abdul Malik
0

Je voudrais vérifier ce lien , et à partir de là. La meilleure partie de javascript a très laxiste idées.

http://fabricjs.com/image-filters/

OriginalL'auteur Jay

Vous devez vous connecter pour publier un commentaire.