From d0214aff79c065e684d86ac3cd43f81e583d86a0 Mon Sep 17 00:00:00 2001 From: blendoit Date: Tue, 28 Jan 2020 08:40:19 -0800 Subject: Add perspective to btn-wrapper. --- app/static/styles/home.css | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) (limited to 'app') diff --git a/app/static/styles/home.css b/app/static/styles/home.css index a5dcbec..a0c6606 100644 --- a/app/static/styles/home.css +++ b/app/static/styles/home.css @@ -6,7 +6,10 @@ position: relative; background: var(--yes); } -.tab-yes:hover {width: 4%; transition: 0.2s;} +.tab-yes:hover ~ .feed-post { + width: 4%; + transition: 0.2s; +} .tab-no { height: 100%; width: 3%; @@ -29,28 +32,41 @@ .post-wrapper { position: relative; max-height: 25%; - max-width: 33%; + max-width: 40%; + perspective: 600px; + perspective-origin: bottom; } .post { + position: relative; height: 70%; background: white; + z-index: -1; border-radius: 12px; padding: 1rem; margin: 1rem; overflow: hidden; } .post:hover {overflow: auto;} -.post:hover + .btn-wrapper {transform: rotateX(0deg);} +.post:hover + .btn-wrapper { + opacity: 100%; + animation: btn-wrapper; + animation-duration: 1s; +} + +@keyframes btn-wrapper { + from{transform: rotateX(-90deg);} + to {transform: rotateX(0deg);} +} .btn-wrapper { position: relative; top: -0.6rem; z-index: 1; - transition: 400ms transform ease-in-out; - transform: rotateX(90deg); + transform: rotateX(-90deg); + /* transition: 400ms transform ease-in-out; */ + /* animation-fill-mode: forwards; */ } -.btn-wrapper:hover {transform: rotateX(0deg);} .btn-yes { height: 25%; -- cgit v1.2.3