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.

/* 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;
}