MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* 1 | /* 1. Force the 300px image to shrink and FIT inside the 60x80 box */ | ||
.mw-parser-output .coverSmall img.zoom-img { | .mw-parser-output .coverSmall img.zoom-img { | ||
width: | width: 100% !important; /* Makes it fill the width of the 60px box */ | ||
height: | height: 100% !important; /* Makes it fill the height of the 80px box */ | ||
object-fit: | object-fit: contain; /* THE FIX: Shrinks the whole image to fit without cropping */ | ||
display: block; | display: block; | ||
transition: transform 0.2s ease-in-out !important; | transition: transform 0.2s ease-in-out !important; | ||
} | } | ||
/* | /* 2. The Hover State - Magnification */ | ||
.coverThumb:hover .coverSmall { | .coverThumb:hover .coverSmall { | ||
overflow: visible; | overflow: visible; | ||
} | } | ||
| Line 28: | Line 18: | ||
left: 0; | left: 0; | ||
/* | /* The size of the magnified preview */ | ||
width: 250px !important; | width: 250px !important; | ||
height: auto !important; | height: auto !important; | ||
/* Move it to the right | /* Keep the full image visible when zoomed too */ | ||
object-fit: contain !important; | |||
/* Move it to the right */ | |||
transform: translate(70px, -20px) !important; | transform: translate(70px, -20px) !important; | ||
Revision as of 09:47, 29 January 2026
/* 1. Force the 300px image to shrink and FIT inside the 60x80 box */
.mw-parser-output .coverSmall img.zoom-img {
width: 100% !important; /* Makes it fill the width of the 60px box */
height: 100% !important; /* Makes it fill the height of the 80px box */
object-fit: contain; /* THE FIX: Shrinks the whole image to fit without cropping */
display: block;
transition: transform 0.2s ease-in-out !important;
}
/* 2. The Hover State - Magnification */
.coverThumb:hover .coverSmall {
overflow: visible;
}
.coverThumb:hover .coverSmall img.zoom-img {
position: absolute;
top: 0;
left: 0;
/* The size of the magnified preview */
width: 250px !important;
height: auto !important;
/* Keep the full image visible when zoomed too */
object-fit: contain !important;
/* Move it to the right */
transform: translate(70px, -20px) !important;
z-index: 10000 !important;
box-shadow: 0 5px 20px rgba(0,0,0,0.5);
border: 1px solid #888;
background: #fff;
max-width: none !important;
}