diff --git a/frontend/src/styles/ads.scss b/frontend/src/styles/ads.scss
index 9df39e3fa..2dfc702c2 100644
--- a/frontend/src/styles/ads.scss
+++ b/frontend/src/styles/ads.scss
@@ -1,7 +1,7 @@
 #ad-vertical-left-wrapper,
 #ad-vertical-right-wrapper {
   margin-top: 2rem;
-  transition: margin-top 0.125s;
+  transition: margin-top 0.125s opacity 0.125s;
 }
 
 #ad-footer-wrapper,
@@ -27,11 +27,16 @@
   background: var(--sub-alt-color);
   display: grid;
   grid-template-areas: "col";
+  transition: opacity 0.125s;
 
   & > div {
     grid-area: col;
   }
 
+  &.focus {
+    opacity: 0;
+  }
+
   .icon {
     font-size: 3rem;
     height: 100%;
diff --git a/frontend/src/ts/test/focus.ts b/frontend/src/ts/test/focus.ts
index a44324482..0f55b4d4c 100644
--- a/frontend/src/ts/test/focus.ts
+++ b/frontend/src/ts/test/focus.ts
@@ -14,6 +14,10 @@ export function set(foc: boolean, withCursor = false): void {
     $("#middle").addClass("focus");
     $("#bannerCenter").addClass("focus");
     $("#capsWarning").addClass("focus");
+    $("#ad-vertical-right-wrapper").addClass("focus");
+    $("#ad-vertical-left-wrapper").addClass("focus");
+    $("#ad-footer-wrapper").addClass("focus");
+    $("#ad-footer-small-wrapper").addClass("focus");
   } else if (!foc && state) {
     state = false;
     Caret.startAnimation();
@@ -24,6 +28,10 @@ export function set(foc: boolean, withCursor = false): void {
     $("#bannerCenter").removeClass("focus");
     $("#capsWarning").removeClass("focus");
     $("#app").removeClass("focus");
+    $("#ad-vertical-right-wrapper").removeClass("focus");
+    $("#ad-vertical-left-wrapper").removeClass("focus");
+    $("#ad-footer-wrapper").removeClass("focus");
+    $("#ad-footer-small-wrapper").removeClass("focus");
   }
 }