Link to article: SCP-8125-J.
.hovercard {
position: relative;
display: inline-block;
}
.hovercard.trigger-newpage > a {
color: rgb(var(--newpage-color));
}
.hovercard > a:focus {
z-index: 1;
}
.hovercard > a:hover {
z-index: 2;
}
.hovercard-content {
position: absolute;
box-shadow: 0 .25rem 1rem 0 rgba(var(--swatch-alternate-color), .25);
line-height: calc(var(--base-line-height) * 1.1);
font-size: 0.86em;
background-color: #fff;
border-radius: 6px;
padding: 8px;
top: -6px;
left: 50%;
width: 120px;
translate: -50% calc(-100% + 5px);
opacity: 0;
pointer-events: none;
transition: translate .3s var(--ease-in-out), opacity .15s var(--ease-in-out);
}
.hovercard-content:after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background-color: #fff;
border-bottom-right-radius: 3px;
margin-top: -6px;
}
@media only screen and (min-width: 960px) {
.hovercard-content {
width: 240px;
left: 50%;
}
}
.hovercard:has(> a:hover, > a:focus, .hovercard-content:hover) .hovercard-content {
translate: -50% -100%;
opacity: 1;
pointer-events: auto;
z-index: 3;
@starting-style {
translate: -50% calc(-100% + 5px);
opacity: 0.4;
}
}
.hovercard:has(> a:hover, > a:focus, .hovercard-content:hover) .hovercard-content:before {
content: "";
position: absolute;
inset: -10px;
z-index: -1;
}
.hovercard-content > img {
display: block;
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 8px;
}
hovercard
trigger-newpage
hovercard-content
hovercard
hovercard-content