summaryrefslogtreecommitdiff
path: root/actualités.css
diff options
context:
space:
mode:
Diffstat (limited to 'actualités.css')
-rw-r--r--actualités.css63
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;
+}