image tint added

ReshetS · Apr 12, 2024 · 6d018c7 · 6d018c7
1 parent fbfb8d8
commit 6d018c7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/src/css/your-order.css b/src/css/your-order.css
@@ -132,6 +132,21 @@
     margin-bottom: 20px;
 }
 
+.image-wrap{
+    position: relative;
+}
+
+.image-wrap::after{
+    content: '';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(20, 20, 20, 0.3);
+    pointer-events: none;
+}
+
 .social-media-text {
         line-height: 1.29;
         letter-spacing: -0.01em;

diff --git a/src/partials/your-order.html b/src/partials/your-order.html
@@ -39,21 +39,21 @@ <h2 class="your-order-title">
           </form>
           </div>
           <div class="social-media-block">
-              <picture>
-                <source media="(max-width: 767px)"
-                        srcset="./img/womfill-mob-1x-min.jpg 1x, 
-                                ./img/womfill-mob-2x-min.jpg 2x, 
-                                ./img/womfill-mob-3x-min.jpg 3x">
-                <source media="(max-width: 1279px)"
-                        srcset="./img/womfill-tab-1x-min.jpg 1x, 
-                                ./img/womfill-tab-2x-min.jpg 2x, 
-                                ./img/womfill-tab-3x-min.jpg 3x">
-                <source media="(min-width: 1280px)"
-                        srcset="./img/womfill-desc-1x-min.jpg 1x, 
-                                ./img/womfill-desc-2x-min.jpg 2x, 
-                                ./img/womfill-desc-3x-min.jpg 3x">
-                <img src="./img/womfill-tab-1x-min.jpg" class="social-media-image" alt="Woman filling the blender with fruits">
-              </picture>
+                <picture class="image-wrap">
+                  <source media="(max-width: 767px)"
+                          srcset="./img/womfill-mob-1x-min.jpg 1x, 
+                                  ./img/womfill-mob-2x-min.jpg 2x, 
+                                  ./img/womfill-mob-3x-min.jpg 3x">
+                  <source media="(max-width: 1279px)"
+                          srcset="./img/womfill-tab-1x-min.jpg 1x, 
+                                  ./img/womfill-tab-2x-min.jpg 2x, 
+                                  ./img/womfill-tab-3x-min.jpg 3x">
+                  <source media="(min-width: 1280px)"
+                          srcset="./img/womfill-desc-1x-min.jpg 1x, 
+                                  ./img/womfill-desc-2x-min.jpg 2x, 
+                                  ./img/womfill-desc-3x-min.jpg 3x">
+                  <img src="./img/womfill-tab-1x-min.jpg" class="social-media-image" alt="Woman filling the blender with fruits">
+                </picture>
             <p class="social-media-text">Follow us on our social networks:</p>
               <ul class="social-media">
                 <li class="social-media-item">