diff options
| -rw-r--r-- | quatuor.css | 14 | ||||
| -rw-r--r-- | quatuor.html | 8 |
2 files changed, 11 insertions, 11 deletions
diff --git a/quatuor.css b/quatuor.css index ca5b8c4..168caf5 100644 --- a/quatuor.css +++ b/quatuor.css @@ -22,7 +22,7 @@ main #photos { padding-bottom: 2em; } -#photos a { +#photos > * { position: relative; width: 6em; height: 100%; @@ -34,7 +34,7 @@ main #photos { overflow: hidden; } -#photos a img { +#photos img.portrait { position: absolute; width: 100%; height: 100%; @@ -44,25 +44,25 @@ main #photos { transition: filter 1s, transform 1s; } -#photos a img:hover { +#photos img.portrait:hover { filter: none; transform: scale(1.05); } -#photos a:nth-of-type(1) { +#photos > *:nth-of-type(1) { top: -0.4em; } -#photos a:nth-of-type(2) { +#photos > *:nth-of-type(2) { left: -1.6em; top: 1.2em; } -#photos a:nth-of-type(3) { +#photos > *:nth-of-type(3) { left: 1.6em; top: -1.2em; } -#photos a:nth-of-type(4) { +#photos > *:nth-of-type(4) { top: 0.4em; } diff --git a/quatuor.html b/quatuor.html index bff9736..b53907f 100644 --- a/quatuor.html +++ b/quatuor.html @@ -43,10 +43,10 @@ <main> <div id="photos"> - <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> + <a href="vlad.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"></a> + <a href="garet.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"></a> + <a href="ivan.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"></a> + <a href="sofia.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"></a> </div> <div id="bio"> |