summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--galerie.html35
-rw-r--r--stylesheets/galerie.css11
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;
}