diff --git a/public/css/Room.css b/public/css/Room.css index 530c62bd..d36360e1 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -217,6 +217,29 @@ body { .image-grid img:hover { transform: scale(1.1); + box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); +} + +/* Strong Impact Click Effect */ +.image-grid img:active { + transform: scale(1.2); + box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.5); + animation: shockwave 0.15s ease-out; +} + +@keyframes shockwave { + 0% { + transform: scale(1.2); + box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5); + } + 50% { + transform: scale(0.9); + box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); + } + 100% { + transform: scale(1.05); + box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3); + } } /*--------------------------------------------------------------