<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*
If you don't mind using position: absolute, overflow: hidden, and z-index (a bit hackish and might break something), you could use a pseudo-element like so:
*/

div.post.reply {
    position: relative;
    overflow: hidden;
}

div.post.reply &gt; * {
    position: relative; /* necessary for elements to respect z-index */
    z-index: 1;
}

div.post.reply &gt; div.files, div.post.reply &gt; div.video-container {
    z-index: 2; /* otherwise .post covers the image/thumbnail and you can't click on some or all of it */
}

div.post.reply:hover {
    background: url('/static/themes/reverse/justice/checkers.png') no-repeat;
    background-color: rgba(0, 0, 0, 0.8);
}

div.post.reply::before {
    position: absolute;
    z-index: 0;
    content: '';
    width: 108px;
    height: 108px; 
    display: block;
    transition: left 0.2s ease-in-out,
        top 0.2s ease-in-out,
        transform 0.3s ease-in-out; /* slightly slower */
    left: 0;
    top: 0;
}

div.post.reply:hover::before {
    background: url('/static/themes/reverse/justice/chamber.png') no-repeat;
    background-size: 108px auto;
    background-position: center; /* the image is not perfectly square */
    transform: rotate(360deg);
    left: max(0px, calc(100% - 108px));
    top: max(0px, calc(100% - 108px * 346 / 352)); /* "..." */
}

</pre></body></html>