blur-image {
    overflow: hidden;
}

blur-image img {
        transition: opacity 0.4s;
    }

.blurry:is(blur-image img) {
            opacity: 0.6;
            filter: blur(30px);
        }

.sharp:is(blur-image img) {
            opacity: 1;
            animation: sharpen 0.6s both;
        }

@keyframes sharpen {
    from {
        filter: blur(30px);
    }
    to {
        filter: blur(0px)
    }
}
blur-image {
    width: 300px;
    height: 300px;
    border: 1px solid;
    display: block;
}
blur-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }