fix images overlay hover

mate-academy · Oct 27, 2024 · 62a5791 · 62a5791
1 parent c7f2c9f
commit 62a5791
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 57 deletions.
diff --git a/src/index.html b/src/index.html
@@ -99,61 +99,59 @@ <h1 class="museum__title">
       class="current-events"
       id="current-events"
     >
-      <div class="page__content">
-        <h1 class="current-events__title">Актуальні події</h1>
-        <div class="current-events__exhibition">
-          <div class="current-events__picture">
-            <img
-              src="./images/exhibition-1.png"
-              class="current-events__image"
-              alt="Exhibition photo"
-            />
+      <h1 class="current-events__title">Актуальні події</h1>
+      <div class="current-events__exhibition">
+        <div class="current-events__picture">
+          <img
+            src="./images/exhibition-1.png"
+            class="current-events__image"
+            alt="Exhibition photo"
+          />
+        </div>
+        <div class="current-events__textarea">
+          <div class="current-events__schedule">
+            <p class="current-events__text">Виставка</p>
+            <p class="current-events__date">26.08-29.11.2019</p>
           </div>
-          <div class="current-events__textarea">
-            <div class="current-events__schedule">
-              <p class="current-events__text">Виставка</p>
-              <p class="current-events__date">26.08-29.11.2019</p>
-            </div>
-            <div class="current-events__subtitle">
-              <p class="current-events__name">Йду і повертаюсь</p>
-              <a
-                href="#current-events"
-                class="current-events__square"
-              ></a>
-            </div>
-            <p class="current-events__info">
-              Національний Художній Музей України презентує унікальну частину
-              колекції Градобанку - українське мистецтво другої половини
-              1980-1995 років.
-            </p>
+          <div class="current-events__subtitle">
+            <p class="current-events__name">Йду і повертаюсь</p>
+            <a
+              href="#current-events"
+              class="current-events__square"
+            ></a>
           </div>
+          <p class="current-events__info">
+            Національний Художній Музей України презентує унікальну частину
+            колекції Градобанку - українське мистецтво другої половини 1980-1995
+            років.
+          </p>
         </div>
-        <div class="current-events__exhibition">
-          <div class="current-events__picture">
-            <img
-              src="./images/exhibition-2.png"
-              class="current-events__image"
-              alt="Exhibition photo"
-            />
+      </div>
+      <div class="current-events__exhibition">
+        <div class="current-events__picture">
+          <img
+            src="./images/exhibition-2.png"
+            class="current-events__image"
+            alt="Exhibition photo"
+          />
+        </div>
+        <div class="current-events__textarea">
+          <div class="current-events__schedule">
+            <p class="current-events__text">Виставка</p>
+            <p class="current-events__date">26.08-29.11.2019</p>
           </div>
-          <div class="current-events__textarea">
-            <div class="current-events__schedule">
-              <p class="current-events__text">Виставка</p>
-              <p class="current-events__date">26.08-29.11.2019</p>
-            </div>
-            <div class="current-events__subtitle">
-              <p class="current-events__name">І спогади і мрії</p>
-              <a
-                href="#current-events"
-                class="current-events__square"
-              ></a>
-            </div>
-            <p class="current-events__info">
-              Національний художній музей України до 100 річчя від дня
-              народження видатної української художниці Тетяни Яблонської
-              відкриває ретроспективну ювілейну виставку «І спогади і мрії».
-            </p>
+          <div class="current-events__subtitle">
+            <p class="current-events__name">І спогади і мрії</p>
+            <a
+              href="#current-events"
+              class="current-events__square"
+            ></a>
           </div>
+          <p class="current-events__info">
+            Національний художній музей України до 100 річчя від дня народження
+            видатної української художниці Тетяни Яблонської відкриває
+            ретроспективну ювілейну виставку «І спогади і мрії».
+          </p>
         </div>
       </div>
       <div class="current-events__lecture">

diff --git a/src/styles/blocks/current-events.scss b/src/styles/blocks/current-events.scss
@@ -25,7 +25,6 @@
       font-size: 48px;
       line-height: 48px;
       text-align: left;
-      grid-column: 1 / 5;
       margin-bottom: 48px;
     }
 
@@ -37,25 +36,30 @@
 
   &__exhibition {
     @include content-padding-inline;
+    @include page-grid;
 
     margin-bottom: 60px;
 
     @include on-tablet {
-      grid-column: 1 / -1;
       margin-bottom: 64px;
     }
 
     @include on-desktop {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 130px;
       margin-bottom: 104px;
     }
   }
 
   &__picture {
     overflow: hidden;
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-column: 1 / -1;
+    }
+
+    @include on-desktop {
+      grid-column: 1 / 8;
+    }
   }
 
   &__image {
@@ -71,7 +75,19 @@
     }
 
     @include on-desktop {
-      width: auto;
+      width: 100%;
+    }
+  }
+
+  &__textarea {
+    grid-column: 1 / -1;
+
+    @include on-tablet {
+      grid-column: 1 / 5;
+    }
+
+    @include on-desktop {
+      grid-column: 9 / -1;
     }
   }