fixed blue area

beyzaozdemr · Sep 24, 2024 · 95c4c30 · 95c4c30
1 parent 86cf9c3
commit 95c4c30
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -295,6 +295,7 @@ header a span {
   margin: 0 auto;
   padding-top: 8px;
 }
+
 .portfolio {
   display: flex;
   padding: 120px 0;
@@ -324,26 +325,26 @@ header a span {
   row-gap: 48px;
 }
 
-.portfolio-item {
+.image-plus-overlay {
+  max-width: 360px;
+  max-height: 300px;
   position: relative;
   overflow: hidden;
-  transition-property: bow-shadow,background-color;
+  transition-property: background-color;
   transition-duration: 250ms;
-  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1) ;
-
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .portfolio-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height:calc(100%-120px);
+  height: 100%;
   display: flex;
   margin: 0 auto;
   background-color: #4d5ae5;
   color: #f4f4fd;
   opacity: 0;
-
 }
 .portfo-content {
   color: #f4f4fd;
@@ -357,15 +358,11 @@ header a span {
   letter-spacing: 2%;
 }
 
-.portfolio-item:hover .portfolio-overlay {
+.image-plus-overlay:hover .portfolio-overlay {
   opacity: 1;
-
 }
-.portfolio-item:hover {
-  box-shadow: 0px 2px 1px 0px #2e2f4214, 0px 1px 1px 0px #2e2f4229,
-    0px 1px 6px 0px #2e2f4214;
-
-    background-color: #4d5ae5;
+.image-plus-overlay:hover {
+  background-color: #4d5ae5;
 }
 .team-class-list h3 {
   font-size: 20px;

diff --git a/index.html b/index.html
@@ -338,7 +338,8 @@ <h3 class="workers-name">Daniel Wilson</h3>
           <h2 class="portfolio-title">Our Portfolio</h2>
           <ul class="portfolio-list">
             <li class="portfolio-item">
-              <img
+              <div class="image-plus-overlay">
+              <img 
                 src="images/apps.jpg"
                 width="360px"
                 height="300px"
@@ -351,13 +352,15 @@ <h2 class="portfolio-title">Our Portfolio</h2>
                   · Cloud Storage App
                 </p>
               </div>
+              </div>
               <div class="port-div">
                 <h3>Banking App</h3>
                 <p class="port-div-content">App</p>
               </div>
             </li>
 
             <li class="portfolio-item">
+              <div class="image-plus-overlay">
               <img
                 src="images/payment.jpg"
                 width="360px"
@@ -371,13 +374,15 @@ <h3>Banking App</h3>
                   · Cloud Storage App
                 </p>
               </div>
+              </div>
               <div class="port-div">
                 <h3>Cashless Payment</h3>
                 <p class="port-div-content">Marketing</p>
               </div>
             </li>
 
             <li class="portfolio-item">
+              <div class="image-plus-overlay">
               <img
                 src="images/meditation.jpg"
                 width="360px"
@@ -391,13 +396,15 @@ <h3>Cashless Payment</h3>
                   · Cloud Storage App
                 </p>
               </div>
+              </div>
               <div class="port-div">
                 <h3>Meditation App</h3>
                 <p class="port-div-content">App</p>
               </div>
             </li>
 
             <li class="portfolio-item">
+              <div class="image-plus-overlay">
               <img
                 src="images/taxi.jpg"
                 width="360px"
@@ -412,13 +419,15 @@ <h3>Meditation App</h3>
                   · Cloud Storage App
                 </p>
               </div>
+              </div>
               <div class="port-div">
                 <h3>Taxi Service</h3>
                 <p class="port-div-content">Marketing</p>
               </div>
             </li>
 
             <li class="portfolio-item">
+              <div class="image-plus-overlay">
               <img
                 src="images/screen.jpg"
                 width="360px"
@@ -432,13 +441,16 @@ <h3>Taxi Service</h3>
                   · Cloud Storage App
                 </p>
               </div>
+              </div>
               <div class="port-div">
                 <h3>Screen Illustrations</h3>
                 <p class="port-div-content">Design</p>
               </div>
             </li>
 
             <li class="portfolio-item">
+              <div class="image-plus-overlay">
+
               <img 
                 src="images/lady.jpg"
                 width="360px"
@@ -452,6 +464,7 @@ <h3>Screen Illustrations</h3>
                   · Cloud Storage App
                 </p>
               </div>
+              </div>
               <div class="port-div">
                 <h3>Online Courses</h3>
                 <p class="port-div-content">Marketing</p>