28172 sujets

CSS et mise en forme, CSS3

Blur image mais pas les contours ?

Bonjour,

je souhaite flouter une image au survol, j'ai donc réaliser ce code :

.encarts .col-md-3 img {
	filter: blur(0);
	-webkit-filter: blur(0);
	-moz-filter: blur(0);
	-o-filter: blur(0);
	-ms-filter: blur(0);
	transition: all 0.3s;
}
.encarts .col-md-3  img:hover {
	filter: blur(5px);
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
}


mais je voudrais que les contours de mon images restent net
sans l'espèce de flou dégradé tout autour.

est-ce possible ?

Merci de votre aide
Bonsoir.

Intriguant... j'ai 'posé' une div par-dessus l'image avec une bordure blanche et l' "effet flou" a disparu... sur Mozilla Firefox en tout cas.

Ce qui a fonctionné, c'est clip-path avec polygon...

Mais il faut agrandir l'image sur les quatre côtés sinon l'image est rognée - évidemment.

Smiley smile
Bonjour.
bzh a écrit :
Mettre l'image dans une div en overflow:hidden devrait fonctionner.

Bonne idée mais ça fonctionne uniquement sur trois côtés de l'image mais pas sur le côté droit (sur Mozilla Firefox 48)... et les effets de bord ne sont pas très esthétiques...

Smiley smile
Modifié par Zelena (05 Nov 2016 - 08:47)
Administrateur
Hello,

C'est un cas de figure assez intéressant en effet, merci Smiley smile

Je pense également qu'une solution est à trouver avec clip-path (mais ce ne sera pas compatible sur IE ni Edge).

J'ai bidouillé un truc avec l'idée suivante :
- un div conteneur (qui me semble nécessaire),
- un élément vide généré de la taille du conteneur
- le contour créé via une bordure sur l'élément généré

ça donne ce résultat : http://codepen.io/raphaelgoetter/pen/aBzOyL?editors=1100

Je suis preneur d'autres idées Smiley cligne
Si je comprends bien le besoin initial, l'idée est de supprimer la bordure plus claire apparaissant autour de l'image suite à l'application du flou...
Ce sujet existe sur différents forums (recherche Google : css remove blur lighter border) et l'une des solutions préconisée consiste à augmenter légèrement la taille de l'image initiale afin de mieux répartir le flou.
Extrait :
I was able to make this work with the transform: scale(1.03);
Property applied on the image. For some reason, on Chrome, the other solutions provided wouldn't work if there was any relatively positioned parent element.

Check  http://jsfiddle.net/ud5ya7jt/
 

This way the image will be slightly zoomed in by 3% and the edges will be cropped which shouldn't be a problem on a blurred image anyway. It worked well in my case because I was using a high res image as a background. Good luck!

A tester...
Bonjour à Tous,
la solution la plus simple m'apparaît être celle-ci dont une synthèse minimaliste des 2 propositions de Sepecat :
<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />

<title>Test blur non-débordant</title>

<style>
#cont{display:inline-block;overflow:hidden} /* french comment : or ni width ni height, aucun border */

#cont img{transform:scale(1.05)} /* french comment : or ni width ni height */

#cont img:hover{filter:blur(10px)}
</style>

</head>

<body>

<div id="cont">
<img src="i6.png" alt="" />
</div>

</body>

</html>
où, au-delà du conteneur "non-débordant", existe une relation entre scale et blur pour "ravaler" la décoloration des bords de l'image floutée. Et ce qui est également intéressant c'est que les dimensions du conteneur s'ajustent sur les dimensions originales de l'image et non sur celles après scale(1.05).

Attesté avec FireFox.

Et pour le fun, voir ici :
http://sentrais.eu/test-blur-non-debordant/test-blur.htm
où l'on peut penser que depuis Hastings en 1066, une langue française à la Cour de Londres a improuvé pleuvoir ou pleurer en blur qui signifie notamment l'action de bouiller, brouiller la vision des yeux tout inondés d'eau, de vapeur, de sang, d'huile, de cendre ou de poussière ...

Bref : je bleure !
Modifié par pictural (08 Nov 2016 - 04:17)
Modérateur
Raphael a écrit :
Hello,

C'est un cas de figure assez intéressant en effet, merci Smiley smile

Je pense également qu'une solution est à trouver avec clip-path (mais ce ne sera pas compatible sur IE ni Edge).

J'ai bidouillé un truc avec l'idée suivante :
- un div conteneur (qui me semble nécessaire),
- un élément vide généré de la taille du conteneur
- le contour créé via une bordure sur l'élément généré

ça donne ce résultat : http://codepen.io/raphaelgoetter/pen/aBzOyL?editors=1100

Je suis preneur d'autres idées Smiley cligne


En repartant de ton exemple, qu'en penses-tu en modifiant comme ceci :
.frame::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* border: 16px solid black; */
	background: black;
	z-index: -1;
}
Sujet clos
Aller à