diff options
| -rw-r--r-- | événements.css | 24 | ||||
| -rw-r--r-- | événements.html | 40 |
2 files changed, 52 insertions, 12 deletions
diff --git a/événements.css b/événements.css index 8753eb3..6a2bd4a 100644 --- a/événements.css +++ b/événements.css @@ -30,7 +30,7 @@ filter: grayscale(0.8) brightness(0.4); } -.event p { +.event .summary { z-index: 1; opacity: 0; font-weight: bold; @@ -38,6 +38,26 @@ transition: 0.5s; } -.event:hover p { +.event:hover .summary { opacity: 1; } + +.event .details { + display: none; +} + +.event input { + width: 100%; + height: 100%; + position: absolute; + cursor: pointer; + opacity: 0; + z-index: 2; +} + +.event input:checked ~ .details { + display: block; + position: fixed; + top: 10em; + left: 0; +} diff --git a/événements.html b/événements.html index 23cbabe..9ac88cc 100644 --- a/événements.html +++ b/événements.html @@ -15,44 +15,64 @@ <div class="main"> <div class="events"> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #0 !<br>Plein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #1 !<br>Pleein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #2 !<br>Pleeein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #3 !<br>Pleeeein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #4 !<br>Pleeeeein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/0/05/KolimaOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #5 !<br>Pleeeeeein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/8/84/Bilibin.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #6 !<br>Pleeeeeeein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/7/70/VaultOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #7 !<br>Pleeeeeeeein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/6/65/ValeOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #8 !<br>Pleeeeeeeeein de détails.</div> </div> <div class="event"> + <input type="radio" name="event"> <img src="https://static.wikia.nocookie.net/goldensun/images/e/ef/TolbiOverworld.png"> - <p>Quelque part<br>À un moment</p> + <p class="summary">Quelque part<br>À un moment</p> + <div class="details">Des détails #9 !<br>Pleeeeeeeeeein de détails.</div> </div> </div> </div> |