diff options
Diffstat (limited to 'actualités.css')
| -rw-r--r-- | actualités.css | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/actualités.css b/actualités.css new file mode 100644 index 0000000..6a2bd4a --- /dev/null +++ b/actualités.css @@ -0,0 +1,63 @@ +.events { + display: grid; + width: 60%; + grid-auto-rows: 14vw; + grid-template-columns: repeat(auto-fit, 14vw); + grid-gap: 1em; + margin-left: auto; + margin-right: 0; + background-color: #ccc; +} + +.event { + position: relative; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; +} + +.event img { + position: absolute; + object-position: center; + object-fit: cover; + height: 100%; + width: 100%; + transition: 0.5s; +} + +.event:hover img { + filter: grayscale(0.8) brightness(0.4); +} + +.event .summary { + z-index: 1; + opacity: 0; + font-weight: bold; + color: white; + transition: 0.5s; +} + +.event:hover .summary { + opacity: 1; +} + +.event .details { + display: none; +} + +.event input { + width: 100%; + height: 100%; + position: absolute; + cursor: pointer; + opacity: 0; + z-index: 2; +} + +.event input:checked ~ .details { + display: block; + position: fixed; + top: 10em; + left: 0; +} |
