MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Ensure table cells don't clip the zoom */
.wikitable td {
    overflow: visible !important;
}

.coverThumb {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* 1. This keeps the boxes uniform and prevents overlapping */
.coverSmall {
    display: block;
    width: 60px;
    height: 80px;
    overflow: hidden; /* Clips the 300px image down to 60x80 */
    border: 1px solid #ddd;
    background: #eee;
}

/* 2. Forces the image to fill the 60x80 box without distorting */
.mw-parser-output .coverSmall img.zoom-img {
    width: 60px !important;
    height: 80px !important;
    object-fit: cover; /* This is the secret to uniform thumbnails */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease !important;
    transform-origin: center center;
    position: relative;
    z-index: 1;
}

/* 3. The Hover State */
.coverThumb:hover {
    z-index: 9999 !important;
}

.coverThumb:hover .coverSmall {
    overflow: visible; /* Let the image "break out" of the box */
}

.coverThumb:hover .coverSmall img.zoom-img {
    /* Set width/height back to auto or a fixed larger size to restore quality */
    width: 240px !important; 
    height: auto !important;
    
    /* Center it over the original thumb */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) !important; 

    /* Aesthetics */
    border: 1px solid #888 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    background-color: #fff !important;
    z-index: 10000 !important;
}