Added season and episode numbers on hover

This commit is contained in:
Johannes Olzem 2024-04-26 02:08:45 +02:00
parent 5ca5dad63b
commit 0c603146ba
Signed by: jolzem
GPG Key ID: DB5485828E95A447
2 changed files with 30 additions and 1 deletions

View File

@ -50,7 +50,10 @@ $table = $conn->query("SELECT * FROM user" . $user_id . " ORDER BY name;");
$i = 0; $i = 0;
while($row = $table->fetch_assoc()): while($row = $table->fetch_assoc()):
?> ?>
<div><img src='https://image.tmdb.org/t/p/original<?php echo $row["poster"];?>' class='poster' alt='<?php echo $row["name"];?>' onclick='openPopup(<?php echo $i;?>)'></div> <div class='entry'>
<img src='https://image.tmdb.org/t/p/original<?php echo $row["poster"];?>' class='poster' alt='<?php echo $row["name"];?>' onclick='openPopup(<?php echo $i;?>)'>
<div class='info'>Season <span><?php echo $row["season"]; ?></span><br>Episode <span><?php echo $row["episode"]; ?></span> </div>
</div>
<div id='popup<?php echo $i;?>' class='popup'> <div id='popup<?php echo $i;?>' class='popup'>
<div class='popup-content'> <div class='popup-content'>

View File

@ -103,6 +103,32 @@ form {
border-radius: 1rem; border-radius: 1rem;
} }
.entry {
position: relative;
text-align: center;
}
.info {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
transition: opacity 200ms;
padding: .5rem 1rem;
border-radius: 1rem;
background: rgba(0, 0, 0, 0.7);
width: calc(100% - 2rem);
}
.info span {
font-size: 150%;
}
.entry:hover > .info {
opacity: 1;
}
.popup { .popup {
display: none; display: none;
position: fixed; position: fixed;