MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* 1. Container Setup */ | ||
.coverThumb{ | .coverThumb { | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
} | } | ||
.coverSmall{ | .coverSmall { | ||
width: 60px; | width: 60px; | ||
height: 80px; | height: 80px; | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
overflow: visible; /* Changed to visible to prevent clipping during transition */ | |||
} | } | ||
/* | /* 2. Image/Link Transition */ | ||
.coverSmall img{ | .coverSmall img, | ||
transition: transform | .coverSmall a { | ||
transition: transform 150ms ease-in-out; | |||
display: block; | |||
} | } | ||
/* | /* 3. The Hover Effect */ | ||
.coverThumb:hover | .coverThumb:hover { | ||
z-index: 9999; /* Higher than any other table row */ | |||
z-index: | |||
} | } | ||
.coverThumb:hover .coverSmall img { | |||
.coverThumb:hover .coverSmall img{ | position: absolute; | ||
transform: translate( | top: 0; | ||
background: #fff; | left: 0; | ||
border: 1px solid # | transform: translate(80px, -20px) scale(4); /* Slightly larger and offset */ | ||
box-shadow: | transform-origin: center center; | ||
/* Aesthetics */ | |||
background-color: #fff; | |||
border: 1px solid #999; | |||
box-shadow: 5px 5px 15px rgba(0,0,0,0.3); | |||
max-width: none !important; /* Overrides MediaWiki image constraints */ | |||
z-index: 10000; | |||
} | |||
/* 4. Table Fix (Crucial for Wikitables) */ | |||
.wikitable td { | |||
/* This prevents the table cell from cutting off the 'popup' */ | |||
overflow: visible !important; | |||
} | |||
/* Ensures the row you are hovering over stays on top of the ones below it */ | |||
.wikitable tr:hover { | |||
position: relative; | |||
z-index: 10; | |||
} | } | ||
Revision as of 09:36, 29 January 2026
/* 1. Container Setup */
.coverThumb {
position: relative;
display: inline-block;
}
.coverSmall {
width: 60px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible; /* Changed to visible to prevent clipping during transition */
}
/* 2. Image/Link Transition */
.coverSmall img,
.coverSmall a {
transition: transform 150ms ease-in-out;
display: block;
}
/* 3. The Hover Effect */
.coverThumb:hover {
z-index: 9999; /* Higher than any other table row */
}
.coverThumb:hover .coverSmall img {
position: absolute;
top: 0;
left: 0;
transform: translate(80px, -20px) scale(4); /* Slightly larger and offset */
transform-origin: center center;
/* Aesthetics */
background-color: #fff;
border: 1px solid #999;
box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
max-width: none !important; /* Overrides MediaWiki image constraints */
z-index: 10000;
}
/* 4. Table Fix (Crucial for Wikitables) */
.wikitable td {
/* This prevents the table cell from cutting off the 'popup' */
overflow: visible !important;
}
/* Ensures the row you are hovering over stays on top of the ones below it */
.wikitable tr:hover {
position: relative;
z-index: 10;
}