display: flex;
flex-wrap: wrap;
align-items: end;
+ margin: -1px;
+}
+li, ul ul {
+ display: contents;
+ height: 100%;
}
figure {
flex: 200px;
+ flex-grow: 1;
max-width: 300px;
overflow: hidden;
+ padding: 1px;
+}
+
+figure:hover ~ ul figure,
+figure:hover ~ ul figcaption {
+ background: #CCC;
+ color: #000;
+}
+figure:hover ~ ul figcaption {
+ background: rgba(255, 255, 255, .5);
+}
+
+figure, figcaption {
+ transition: all .5s ease-in;
+}
+li.parent:hover > figure > figcaption,
+figure:hover > figcaption {
+ font-size: 175%;
+ right: 50%;
+ bottom: 50%;
+ transform: translate(50%, 50%);
+ margin-left: -60%; /* keep width */
}
</style>
EOT
sub showimg {
my ($name) = @_;
my ($img) = $name =~ /^([\w-]+)/;
+ $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/­/gx;
$name =~ y/_/ /;
my $hidden = $name =~ s/\?$//;
my $alt = $name;
}
sub printimgs {
+ say '<ul>';
for my $row (@_) {
- printf '<li>';
+ printf '<li%s>', defined $table{$row} && ' class="parent"';
print showimg($row);
- print '</li>';
printimgs(@{$_}) for $table{$row} // ();
+ print '</li>';
}
+ say '</ul>';
}
-say '<ul>';
printimgs($table{''});
-say '</ul>';