diff options
author | Florrie <towerofnix@gmail.com> | 2019-11-13 09:53:20 -0400 |
---|---|---|
committer | Florrie <towerofnix@gmail.com> | 2019-11-13 09:53:20 -0400 |
commit | 3418e18492d814e832d63f20dc46ff6cb2ac816f (patch) | |
tree | 6ea34b5f3b2d44128e2cd19092e01883a05aa4d9 /grid-site.css |
Initial commit
Diffstat (limited to 'grid-site.css')
-rw-r--r-- | grid-site.css | 51 |
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; +} |