Return to Question

When a spoiler blockquote contains text, the text transitions in smoothly using a CSS transition. If it contains an image, the transition is abrupt.

I've shared a brief animated gif of the transition as-is

If the CSS were changed from:

.spoiler:hover img {
    visibility: visible;
}
.spoiler img {
    visibility: hidden;
}

to:

.spoiler:hover img {
    opacity: 1;
}
.spoiler img {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

The image transition would be much smoother.

Live example:

this is a test this is only a test

When a spoiler blockquote contains text, the text transitions in smoothly using a CSS transition. If it contains an image, the transition is abrupt.

I've shared a brief animated gif of the transition as-is

If the CSS were changed from:

.spoiler:hover img {
    visibility: visible;
}
.spoiler img {
    visibility: hidden;
}

to:

.spoiler:hover img {
    opacity: 1;
}
.spoiler img {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

The image transition would be much smoother.

Live example:

this is a test this is only a test

When a spoiler blockquote contains text, the text transitions in smoothly using a CSS transition. If it contains an image, the transition is abrupt.

I've shared a brief video of the transition as-is

If the CSS were changed from:

.spoiler:hover img {
    visibility: visible;
}
.spoiler img {
    visibility: hidden;
}

to:

.spoiler:hover img {
    opacity: 1;
}
.spoiler img {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

The image transition would be much smoother.

Live example:

this is a test this is only a test

When a spoiler blockquote contains text, the text transitions in smoothly using a CSS transition. If it contains an image, the transition is abrupt.

I've shared a brief animated gif of the transition as-is

If the CSS were changed from:

.spoiler:hover img {
    visibility: visible;
}
.spoiler img {
    visibility: hidden;
}

to:

.spoiler:hover img {
    opacity: 1;
}
.spoiler img {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

The image transition would be much smoother.

Live example:

this is a test this is only a test

When a spoiler blockquote contains text, the text transitions in smoothly using a CSS transition. If it contains an image, the transition is abrupt.

I've shared a brief video of the transition as-is

If the CSS were changed from:

.spoiler:hover img {
    visibility: visible;
}
.spoiler img {
    visibility: hidden;
}

to:

.spoiler:hover img {
    opacity: 1;
}
.spoiler img {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

The image transition would be much smoother.

Live example:

When a spoiler blockquote contains text, the text transitions in smoothly using a CSS transition. If it contains an image, the transition is abrupt.

I've shared a brief video of the transition as-is

If the CSS were changed from:

.spoiler:hover img {
    visibility: visible;
}
.spoiler img {
    visibility: hidden;
}

to:

.spoiler:hover img {
    opacity: 1;
}
.spoiler img {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

The image transition would be much smoother.

Live example:

this is a test this is only a test