diff options
Diffstat (limited to 'public/product.css')
| -rw-r--r-- | public/product.css | 52 |
1 files changed, 50 insertions, 2 deletions
diff --git a/public/product.css b/public/product.css index 5b718c9..54fe81b 100644 --- a/public/product.css +++ b/public/product.css @@ -4,6 +4,54 @@ gap: 16px; } -.twocolumn .left { - text-align: center; +.twocolumn .left { text-align: center; } +.twocolumn .left img { + max-width: 100%; + transition: box-shadow 300ms; } +.twocolumn .left a { + transition: transform 300ms; +} + +.twocolumn .left a:hover { transform: scale(103%); } +.twocolumn .left a:hover img { box-shadow: 0px 7px 40px -17px #0009; } + +.twocolumn .left a { + position: relative; + display: inline-block; + line-height: 0; +} + +.twocolumn .left a::after, +.twocolumn .left img { + border-radius: 8px; +} + +.twocolumn .left a::after { + content: "Open in nieuw tabblad"; + font-size: 75%; +} +.twocolumn .left a::after { + white-space: nowrap; + display: block; + background-color: var(--bg-alt); + color: var(--fg); + padding: 8px 12px; + position: absolute; + bottom: -8px; + left: 50%; + transform: translate(-50%, 100%) translateY(-10px); + line-height: initial; + margin-top: 20px; + transition-property: opacity, transform; + transition-duration: 300ms; + opacity: 0; +} + +.twocolumn .left a:hover:after { + transform: translate(-50%, 100%) translateY(0px); + opacity: 1; +} + +.twocolumn .right h2 { margin-top: 0; } + |