Link to article: File Directory.
.hover-opacity-div {
opacity: 0;
transition: opacity 0.5s ease;
}
.hover-opacity-div:hover {
opacity: 1;
transition: opacity 0.5s ease;
}
.hover-text {
display: inline-block;
position: relative;
width: max-content;
}
.hover-text .text-default,
.hover-text .text-hover {
display: block;
white-space: nowrap;
transition: opacity 0.3s ease;
}
.hover-text .text-hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center; /* Center the shorter text */
opacity: 0;
visibility: hidden;
}
.hover-text:hover .text-default {
opacity: 0;
visibility: hidden;
}
.hover-text:hover .text-hover {
opacity: 1;
visibility: visible;
}
text-align: center;
margin-bottom:50px;
text-align: center;
font-weight: 700;
font-weight: 300;
color: blue;
height:1vh;
font-size:1.5rem; font-weight: bold; --content:'Directory Synopsis'
user-select: all;
font-weight: 700;
font-weight: 300;
color: green;
font-weight: 700;
font-weight: 700;
font-weight: 300;
color: green;
background-color: rgba(0, 0, 0, 0.02); width:100%; white-space: wrap;
padding-left: 5px; border-left: thin solid black; margin-left: 2vh;
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
font-weight: 700;
font-weight: 300;
color: orange;
--content:
padding-left: 5px; border-left: thin solid black; margin-left: 2vh;
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
font-weight: 700;
font-weight: 300;
color: green;
font-weight: 700;
color: green;
padding-left: 5px; border-left: thin solid black; margin-left: 2vh;
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
font-weight: 700;
font-weight: 300;
color: orange;
--content:
padding-left: 5px; border-left: thin solid black; margin-left: 2vh;
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
--content:
font-weight: 700;
font-weight: 300;
color: green;
font-weight: 700;
color: green;
height:4vh;
height:4vh;
height:1vh;
padding-left: 5px; border-left: thin solid black; margin-left: 2vh;
font-weight: 300;
color: blue;
font-weight: 700;
font-weight: 300;
color: orange;
height:1vh;
padding-left: 5px; border-left: thin solid black; margin-left: 2vh;
text-shadow: #fc0 1px 0 5px;
color: red; user-select: all;
font-weight: 700;
font-weight: 300;
color: green;
font-weight: 700;
height:5vh;
user-select: all;
warning
hidden
info-container
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
bar
left
header-trigger
style02-plaintext
animation04
right
target
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
responsive-text
text-small-pc
animation05
animation05
animation05
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
animation05
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
animation05
animation05
animation05
animation05
animation05
style03-plaintext
animation03
animation05
style03-plaintext
animation03
animation05
style03-plaintext
animation03
style03-plaintext
animation03
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
text-large-pc
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
dialogue-box
trigger
style05-plaintext
bl
amelia
tl
image-bubble
br
rosenaic
tr
image-bubble
text-mobile-landscape
animation05
animation05
animation05
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
animation05
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
animation05
animation05
animation05
animation05
animation05
style03-plaintext
animation03
animation05
style03-plaintext
animation03
animation05
style03-plaintext
animation03
style03-plaintext
animation03
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
text-mobile-portrait
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
style03-plaintext
animation03
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
dialogue-box
trigger
style05-plaintext
bl
amelia
tl
image-bubble
br
rosenaic
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
hover-text
text-default
text-hover
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
dialogue-box
trigger
style02-plaintext
bl
rosenaic
tl
image-bubble
dialogue-box
trigger
style05-plaintext
br
amelia
tr
image-bubble
hover-opacity-div
animation04