add div wrapper for last project image, get pixele perfect for last i…

…mage
Andrej044 · Jun 26, 2023 · 8e5e98f · 8e5e98f
1 parent aa1abc2
commit 8e5e98f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -175,7 +175,9 @@ <h3 class="describe__title">memory game</h3>
           </div>
         </li>
         <li class="projects__item">
-          <img class="projects__preview-img" src="images/thumbnail-project-6-large.webp" alt="art gallery showcase">
+          <div class="preview-img--wrapper">
+            <img class="projects__preview-img" src="images/thumbnail-project-6-large.webp" alt="art gallery showcase">
+          </div>
           <div class="projects__describe">
             <h3 class="describe__title">art gallery showcase</h3>
             <ul class="projects__tech-list">

diff --git a/styles.css b/styles.css
@@ -734,6 +734,7 @@ img{
     .projects__item{
       position: relative;
       min-width: 540px;
+      overflow: hidden;
     }
     .projects__item:hover .describe__links-wrapper{
       display: flex;
@@ -748,6 +749,14 @@ img{
     .projects__preview-img{
       max-height: 400px;
     }
+    .preview-img--wrapper{
+      max-width: 540px;
+      max-height: 400px;
+      overflow: hidden;
+    }
+    .preview-img--wrapper > img {
+      transform: scale(1.3) translate(5.9rem, 4.6rem);
+    }
 
     .describe__links-wrapper{
       position: absolute;