I wrote an simple function which implements opacity on a blurred image on mouseover. Note that parent is smaller than child(image), I need over-flow hidden. You can see a bug, at the end of transition, the image size changes suddenly!
the problem disappears if I delete transition, (but I want transition)
the problem disappears if I supp blur (but I want blur)
the problem disappears if parent is bigger than child (but I want parent smaller with over-flow hidden)
there is a accumulation of parameter (opacity-transition, blur, overflow hidden on parent) which creates a bug, and I don't know how to fix it.
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>