Add image switcher

2026-04-28 12:15:27 +08:00 · 2017-07-11 13:07:04 +02:00
parent f8cc852478
commit 743b89775f
2 changed files with 41 additions and 6 deletions
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -97,3 +97,35 @@ code {
    color: $text-gray;
  }
 }
+
+.sixteen-by-nine {
+  position: relative;
+
+  &:before {
+    display: block;
+    content: "";
+    width: 100%;
+    padding-top: (9 / 16) * 100%;
+  }
+
+  > .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}
+
+.switcher-input {
+  display: none;
+}
+
+.switcher-item {
+  transition: opacity .15s ease-in-out;
+  opacity: 0;
+
+  input:checked + & {
+    opacity: 1;
+  }
+}