Merge pull request #133 from nightven/home-page6

overlay effect
nightven · Sep 7, 2023 · edddff1 · edddff1
2 parents a7f8ca7 + 6fd9d5b
commit edddff1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/src/js/template/markup.js b/src/js/template/markup.js
@@ -37,20 +37,22 @@ function markupAllBooks(arr) {
     .map(
       ({ _id, title, author, book_image }) =>
         `
-      <li class="card-set-item js-item-books js-item-book" data-id="${_id}">
+      <li class="js-item-book card-set-item" data-id="${_id}">
         <a href="#" >
-   
-          <img class="book-img" src="${
-            book_image || defaultImg
-          }" alt="${title}" loading="lazy"/>
-          <div class="book-overlay">
-            <p class="book-overlay-text">QUICK VIEW</p>
-          </div>
 
-          <div>
-            <h3 class="book-title">${limitStr(title, 20)}</h3>
-            <p class="book-author">${author}</p>
-          </div>
+        <div class="overlay-thumb" id="${_id}">
+            <img class="book-img" src="${
+              book_image || defaultImg
+            }" alt="${title}" loading="lazy"/>
+        
+            <div class="book-overlay">
+              <p class="book-overlay-text">QUICK VIEW</p>
+            </div>
+        </div>
+
+              <h3 class="book-title">${limitStr(title, 20)}</h3>
+              <p class="book-author">${author}</p>
+       
         </a>
       </li>
     `
@@ -64,16 +66,20 @@ function markupList(books) {
   return books
     .map(({ book_image, title, author, _id }) => {
       return `<li class="js-item-books card-set-item" data-id="${_id}">
+            <div class="overlay-thumb" id="${_id}">
+
             <img src="${
               book_image || defaultImg
             }" alt="${title}" data-img-id="${_id}" loading="lazy" class="img-books"/>
-            
+          
             <div class="book-overlay">
               <p class="book-overlay-text">QUICK VIEW</p>
             </div>
-            
+          </div>
+
             <h3 class="js-named-book">${limitStr(title, 20)}</h3>
             <p class="js-author-book">${author}</p>
+
         </li>`;
     })
     .join('');

diff --git a/src/sass/_home-page.scss b/src/sass/_home-page.scss
@@ -99,11 +99,12 @@
   color: $color-violet;
 }
 
-// -----------------------------
-
 .category {
   margin-bottom: 40px;
+}
 
+.category,
+.title-book {
   color: var(--main-text-clr);
   font-size: 32px;
   font-weight: 700;
@@ -123,6 +124,7 @@
     letter-spacing: -1.92px;
   }
 }
+
 .category {
   .normal-title {
     color: var(--home-title-first);
@@ -171,7 +173,6 @@
 */
 
 .js-btn-books {
-  cursor: pointer;
   width: 124px;
   height: 46px;
   color: var(--see-more-text);
@@ -193,6 +194,7 @@
   transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
     color 400ms cubic-bezier(0.4, 0, 0.2, 1),
     box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
 }
 
 .js-btn-books:hover,
@@ -227,7 +229,6 @@
 .js-item-book {
   width: 335px;
   list-style: none;
-  position: relative;
 }
 
 .js-item-books:hover,
@@ -248,13 +249,20 @@
   |    QUICK VIEW
   |============================
 */
+.overlay-thumb {
+  position: relative;
+  overflow: hidden;
+}
+
 .book-overlay {
   width: 100%;
   height: 70px;
   background-color: $color-yellow;
   border-radius: 0px 0px 8px 8px;
   position: absolute;
-  transform: translateY(-100%);
+
+  bottom: 0;
+  transform: translateY(100%);
   opacity: 0;
 
   color: $color-black;
@@ -263,18 +271,15 @@
   line-height: 1.29;
   letter-spacing: -0.56px;
   text-transform: uppercase;
-  transition: opacity 900ms ease;
+  // transition: transform 600ms ease, opacity 600ms ease;
+  transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 950ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.js-item-books:hover .book-overlay,
-.js-item-book:hover .book-overlay {
+.overlay-thumb:hover .book-overlay {
   opacity: 1;
   cursor: pointer;
-}
-
-.js-item-books,
-.js-item-book {
-  overflow: hidden;
+  transform: translateY(0);
 }
 
 .book-overlay-text {