diff options
| -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"> |