diff options
| -rw-r--r-- | galerie.html | 35 | ||||
| -rw-r--r-- | stylesheets/galerie.css | 11 |
2 files changed, 25 insertions, 21 deletions
diff --git a/galerie.html b/galerie.html index 5618e21..4d97e8d 100644 --- a/galerie.html +++ b/galerie.html @@ -1,22 +1,25 @@ <main> <h1>Photos</h1> <div class="mosaic photos"> - <a class="photo" href="images/photos/PierreVaillant2.jpg" - target="_blank"> - <img src="images/photos/PierreVaillant2.jpg"> - <p class="credits"><span>Pierre Vaillant</span></p> - </a> - <a class="photo" href="images/photos/PierreVaillant1.jpg" - target="_blank"> - <img src="images/photos/PierreVaillant1.jpg"> - <p class="credits"><span>Pierre Vaillant</span></p> - </a> - <a class="photo" href="images/photos/CyrilGhestem1.jpg" - target="_blank"> - <img src="images/photos/CyrilGhestem1.jpg"> - <p class="credits"><span>Cyril Ghestem</span></p> - </a> - </div> + <div class="photo"> + <a href="images/photos/PierreVaillant2.jpg" + target="_blank"> + <img src="images/photos/PierreVaillant2.jpg"> + </a> + <p class="credits"><a href="">Pierre Vaillant</a></p> + </div><div class="photo"> + <a href="images/photos/PierreVaillant1.jpg" + target="_blank"> + <img src="images/photos/PierreVaillant1.jpg"> + </a> + <p class="credits"><a href="">Pierre Vaillant</a></p> + </div><div class="photo"> + <a href="images/photos/CyrilGhestem1.jpg" + target="_blank"> + <img src="images/photos/CyrilGhestem1.jpg"> + </a> + <p class="credits"><a href="">Cyril Ghestem</a></p> + </div> </div> <h1>Vidéos</h1> <div class="mosaic videos"> <div class="video"> diff --git a/stylesheets/galerie.css b/stylesheets/galerie.css index 3a80253..ede8ca0 100644 --- a/stylesheets/galerie.css +++ b/stylesheets/galerie.css @@ -4,7 +4,7 @@ grid-gap: 0.8em; } -.mosaic a.photo { +.mosaic .photo { position: relative; width: 100%; height: 0; @@ -23,24 +23,25 @@ filter: none; } -a.photo p.credits:before { +.photo p.credits:before { content: '© '; font-size: small; color: white; } -a.photo p.credits { +.photo p.credits { position: absolute; bottom: 0; right: 0; margin: 0; color: white; background: #0008; + border-top-left-radius: 0.5em; font-size: small; } -a.photo p.credits > span { +.photo p.credits > a { display: none; } -a.photo p.credits:hover > span { +.photo p.credits:hover > a { display: initial; } |
