Skip to main content
3 of 6
added 79 characters in body
Shadow Wizard
  • 175k
  • 33
  • 437
  • 864

Ease the aggressive transition on images in spoilers

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:

zzzzBov
  • 1.9k
  • 1
  • 13
  • 21