« get me outta code hell

Initial commit - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/grid-site.css
diff options
context:
space:
mode:
authorFlorrie <towerofnix@gmail.com>2019-11-13 09:53:20 -0400
committerFlorrie <towerofnix@gmail.com>2019-11-13 09:53:20 -0400
commit3418e18492d814e832d63f20dc46ff6cb2ac816f (patch)
tree6ea34b5f3b2d44128e2cd19092e01883a05aa4d9 /grid-site.css
Initial commit
Diffstat (limited to 'grid-site.css')
-rw-r--r--grid-site.css51
1 files changed, 51 insertions, 0 deletions
diff --git a/grid-site.css b/grid-site.css
new file mode 100644
index 00000000..865c441f
--- /dev/null
+++ b/grid-site.css
@@ -0,0 +1,51 @@
+body {
+    background-color: #222222;
+}
+
+.grid-listing {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+}
+
+.grid-listing > .grid-item {
+    flex: 1 1 0;
+    display: inline-block;
+    min-width: 200px;
+    max-width: 240px;
+    background-color: #111111;
+    position: relative;
+    overflow: hidden;
+}
+
+.grid-listing > .grid-item > img {
+    width: 100%;
+    transition: filter 0.25s, transform 0.25s;
+    display: block;
+}
+
+.grid-listing > .grid-item:hover > img {
+    filter: saturate(0.25) brightness(0.85) blur(1px);
+    transform: scale(1.15);
+}
+
+.grid-listing > .grid-item > span {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    opacity: 0;
+    transition: opacity 0.25s;
+    text-shadow: 0 0 2px #000000;
+}
+
+.grid-listing > .grid-item:hover > span {
+    opacity: 1;
+}