From 660d23d9eb58bbe0a3c7ac96e263376ae3c8f793 Mon Sep 17 00:00:00 2001 From: conor Date: Wed, 20 Oct 2021 21:40:44 +0100 Subject: [PATCH] Set up opacity transition --- animation/03-pop-up/solution/solution.css | 23 +++++++++++++++++----- animation/03-pop-up/solution/solution.html | 12 +++++------ animation/03-pop-up/solution/solution.js | 6 +++++- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/animation/03-pop-up/solution/solution.css b/animation/03-pop-up/solution/solution.css index dec9f46..9a10baf 100644 --- a/animation/03-pop-up/solution/solution.css +++ b/animation/03-pop-up/solution/solution.css @@ -3,12 +3,25 @@ margin: 0; } -#popup-container { +.popup-container { width: 100vw; height: 100vh; - display: flex; - justify-content: center; - align-items: center; + background-color: #ffffff; + opacity: 1; + transition: background-color 0.5s ease-in, opacity 0.5s ease-in; +} + +.popup-container.show { + background-color: #000000; + opacity: 40%; +} + +#trigger-modal, +.popup-modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .popup-modal { @@ -21,6 +34,6 @@ visibility: hidden; } -.show { +.popup-modal.show { visibility: visible; } diff --git a/animation/03-pop-up/solution/solution.html b/animation/03-pop-up/solution/solution.html index 66c1d70..4c2a853 100644 --- a/animation/03-pop-up/solution/solution.html +++ b/animation/03-pop-up/solution/solution.html @@ -8,12 +8,12 @@ -