Skip to main content
5 of 6
gif > flash
zzzzBov
  • 1.9k
  • 1
  • 13
  • 21

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 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
placeholder image

zzzzBov
  • 1.9k
  • 1
  • 13
  • 21