diff options
| author | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-11-29 23:59:34 +0100 |
|---|---|---|
| committer | Kévin Le Gouguec <kevin.legouguec@gmail.com> | 2020-11-30 00:00:06 +0100 |
| commit | fb85192fd4b39ea227e48da9fbdd7975929fcfcc (patch) | |
| tree | 5d91c138f542f90a19b56745fca0d118c8d103e5 | |
| parent | 6494bedb34c452c11eb1730e54e240c9d71a2e52 (diff) | |
| download | quatuorbellefeuille.com-fb85192fd4b39ea227e48da9fbdd7975929fcfcc.tar.xz | |
Add links to quatuor members
I'm flinging random CSS attributes at this beast about as gracefully
as Aloy trying to pin down a Thunderjaw.
Someone needs to make a GIF of firing a ropecaster with "position:
absolute", "self-align: center", "justify-content: center", "height:
100%", "display: grid" etc. zooming past with each bolt; it ends with
the giant roaring robot dinosaur breaking free, of course.
| -rw-r--r-- | quatuor.css | 18 | ||||
| -rw-r--r-- | quatuor.html | 8 |
2 files changed, 16 insertions, 10 deletions
diff --git a/quatuor.css b/quatuor.css index 129f712..249540f 100644 --- a/quatuor.css +++ b/quatuor.css @@ -21,12 +21,18 @@ main #bio { background-color: #dbb; } -#photos img { +#photos a { position: relative; width: 8em; min-width: 7vw; max-width: 12vw; height: 100%; +} + +#photos a img { + position: absolute; + width: 100%; + height: 100%; object-fit: cover; object-position: center; border-color: #ddd; @@ -38,24 +44,24 @@ main #bio { transition: filter 1s; } -#photos img:hover { +#photos a img:hover { filter: none; } -#photos img:nth-of-type(1) { +#photos a:nth-of-type(1) { top: -0.4vw; } -#photos img:nth-of-type(2) { +#photos a:nth-of-type(2) { left: -1.6vw; top: 1.2vw; } -#photos img:nth-of-type(3) { +#photos a:nth-of-type(3) { left: 1.6vw; top: -1.2vw; } -#photos img:nth-of-type(4) { +#photos a:nth-of-type(4) { top: 0.4vw; } diff --git a/quatuor.html b/quatuor.html index 7b3e1b3..486e387 100644 --- a/quatuor.html +++ b/quatuor.html @@ -34,10 +34,10 @@ <main> <div id="photos"> - <img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"> - <img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"> - <img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"> - <img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"> + <a href="vlad.html"><img src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"></a> + <a href="garet.html"><img src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"></a> + <a href="ivan.html"><img src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"></a> + <a href="sofia.html"><img src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"></a> </div> <div id="bio"> |