CSS transition
no funciona en backdrop-filter
si uso overflow:hidden
en el elemento padre.
Código de ejemplo:
.image-wrapper {
width: 200px;
border-radius: 6px;
position: relative;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(0px);
transition-duration: .5s;
}
.image-wrapper:hover .overlay {
backdrop-filter: blur(15px);
}
.image-wrapper img {
max-width: 100%;
height: auto;
}
<h4>// overflow:hidden (transition not working)</h4>
<div class="image-wrapper" style="overflow: hidden">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
Video de ejemplo: https://take.ms/fo80F
2 respuestas
La verdadera culpable parece ser la border-radius
.
Suena como un error y no pude encontrar uno (aunque hay muchos relacionados ya que toda esta función de filtro de fondo todavía está llena de errores tanto en la implementación como en las especificaciones), por lo que es posible que desee informarlo directamente a los que pueden hacer algo al respecto.
Tenga en cuenta que una solución alternativa es usar una ruta de clip en lugar de este radio de borde:
.image-wrapper {
width: 200px;
position: relative;
line-height: 0
}
.clip-me {
clip-path: inset(0px 0px round 6px 6px);
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(0px);
transition-duration: .5s;
}
.image-wrapper:hover .overlay {
backdrop-filter: blur(15px);
}
.image-wrapper img {
max-width: 100%;
height: auto;
}
<h4>// overflow:hidden (transition working but overflow is now useless)</h4>
<div class="image-wrapper clip-me" style="overflow: hidden;">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
<div class="overlay"></div>
</div>
Por un par de razones, sugeriría simplificar el código como se muestra a continuación. Creo que hace lo mismo que quieres y es más compatible con todos los navegadores, ya que Firefox actualmente no es compatible con backdrop-filter
.
.image-wrapper {
width: 200px;
border-radius: 6px;
position: relative;
}
.image-wrapper img {
max-width: 100%;
height: auto;
filter: blur(0);
transition-duration: .5s;
}
.image-wrapper img:hover {
filter: blur(15px);
}
<h4>// overflow:hidden (transition is now working)</h4>
<div class="image-wrapper" style="overflow: hidden">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>
<h4>// overflow:visible</h4>
<div class="image-wrapper">
<img src="https://i.picsum.photos/id/292/536/354.jpg?hmac=JmwZG4JsRmarXfsRwZuzcaOYhm5ZhvdpGAoX6a-syQ0" />
</div>
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.