Escribí una función simple que implementa la opacidad en una imagen borrosa al pasar el mouse. Tenga en cuenta que el padre es más pequeño que el hijo (imagen), necesito un desbordamiento oculto. Puede ver un error, al final de la transición, ¡el tamaño de la imagen cambia repentinamente!
el problema desaparece si elimino la transición (pero quiero la transición)
el problema desaparece si apoyo desenfoque (pero quiero desenfoque)
el problema desaparece si el padre es más grande que el hijo (pero quiero que el padre sea más pequeño con el desbordamiento oculto)
hay una acumulación de parámetros (transición de opacidad, desenfoque, desbordamiento oculto en el padre) que crea un error y no sé cómo solucionarlo.
var my_parent = document.querySelector('.parent'); var my_child = document.querySelector('.child'); my_parent.addEventListener('mouseover', function() { my_child.style.opacity = '1'; // SAME PROBLEM WITH ANIMATION // my_child.style.animationName = 'my_animation'; // my_child.style.animationDuration = '1s'; // my_child.style.animationTimingFunction = 'ease-in-out'; // my_child.style.animationIterationCount = 'linear'; // my_child.style.webkitAnimationPlayState = 'running'; // my_child.style.animationFillMode = 'forwards'; }); .parent { width: 200px; height: 200px; overflow: hidden; } .child { width: 250px; height: 250px; opacity: 0; -moz-filter: blur(40px); -o-filter: blur(40px); -ms-filter: blur(40px); filter: blur(40px); -webkit-transition: opacity 0.5s ease-out; -moz-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } @-webkit-keyframes my_animation { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes my_animation { 0% { opacity: 0; } 100% { opacity: 1; } } <div class="parent"> <img class="child" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"> </div>