Link to article: Dc_Yerko's Author Page.
/* Code taken from the Sigma-9 Themes article. Thank you Ralliston, Lt Flops and Estrellayoshte */
.tcontainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: space-between;
}
.caser {
background-color: white;
width: calc(11rem + 1.5vw);
padding: 6px;
margin: 6px;
box-sizing: border-box;
border: solid 1px #ccc;
display: block;
text-align: center;
transition: transform .16s;
line-height: 1.1;
position: relative;
}
.caser hr {
margin-left: 0; margin-right: 0;
}
.caser h4 {
margin-top: 14px;
margin-bottom: -12px;
}
.caser img.image {
width: 100%;
height: calc(10.625rem + 1vw);
object-fit: cover;
object-position: top;
}
.caser:hover {
transform: scale(1.52);
z-index: 2;
}
.caser:focus-within {
transform: scale(1.52);
z-index: 2;
}
.caser:hover .hoverdesc,
.caser .hoverdesc:hover {
margin-top: 0;
opacity: 1;
pointer-events: all;
}
.caser:focus-within .hoverdesc{
margin-top: 0;
opacity: 1;
pointer-events: all;
}
.hoverdesc {
position: absolute;
box-sizing: border-box;
background: white;
border: solid 1px #ccc;
width: calc(11rem + 1.5vw);
top: 100%; left: 50%;
transform: translateX(-50%);
margin-top: -5rem;
padding: 0.4rem;
opacity: 0;
font-size: 70%;
pointer-events: none;
transition: margin-top 0.3s cubic-bezier(.08,.72,.5,.94), opacity 0.175s linear;
z-index: -1;
word-break: unset;
}
.anchor {
position: sticky;
height:0;
top: 0;
}
.sidebox {
margin-top: 16px;
max-height: calc(92vh - 24px);
position: absolute;
top: 0;
right: -14em;
z-index: 4;
box-sizing: border-box;
border: solid 1px black;
background-color: #f8f8f8;
padding: 15px;
width: 200px;
}
@media (max-width: 1384px) {
.sidebox {
display: none;
}
}
background-color: black; color: #eeca03; text-align: center; padding-top: 10px; padding-bottom: 10px;
margin: auto;
component:scp-hover-box-styling
theme:i57-theme
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:scp-hover-box-structure
component:image-block
component:image-block
component:image-block
anchor
sidebox
tcontainer
caser
hoverdesc
caser
hoverdesc
tcontainer
caser
hoverdesc
caser
hoverdesc
caser
hoverdesc
caser
hoverdesc
caser
hoverdesc