3362: No opacity on program card, pointer when hovering (#2062)

* No opacity on program card, pointer when hovering * Transition text, image cover black to opaque
mitodl · Jan 19, 2024 · 168e491 · 168e491
1 parent 3562b74
commit 168e491
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 30 deletions.
diff --git a/cms/templates/course_list_card.html b/cms/templates/course_list_card.html
@@ -2,13 +2,16 @@
     {% for card in cards %}
     <li onClick="javascript:window.open('{{card.course.page.url}}');"> 
         <div class="program-course-card">
-        <img src="{{card.featured_image}}" alt="">
-        <div class="program-course-card-info">
-            <div class="start-date">
-            {{card.start_descriptor}}
+            <div class="image">
+                <img src="{{card.featured_image}}" alt="">
+                <div class="overlay"></div>
+            </div>
+            <div class="program-course-card-info">
+                <div class="start-date">
+                {{card.start_descriptor}}
+                </div>
+                <h3 class="title">{{card.course.title}}</h3>
             </div>
-            <h3 class="title">{{card.course.title}}</h3>
-        </div>
         </div>
     </li>
     {% endfor %}

diff --git a/frontend/public/scss/product-page/program-courses.scss b/frontend/public/scss/product-page/program-courses.scss
@@ -59,23 +59,41 @@ body.new-design {
                 height: 259px;
                 transition: .25s;
 
-                img {
-                    max-width: 262px;
-                    max-height: 171px;
-                    height: 171px;
-                    object-fit: cover;
-                    object-position: center;
-                    background: rgba(0, 0, 0, 0.50);
-                    opacity: 0.5;
-                    transition: .25s;
-
-                    @include media-breakpoint-down(sm) {
-                        display: block;
-                        float: none;
-                        margin: 0 auto 10px;
+                .image {
+                    position: relative;
+                    img {
+                        max-width: 262px;
+                        max-height: 171px;
+                        height: 171px;
+                        object-fit: cover;
+                        object-position: center;
+                        @include media-breakpoint-down(sm) {
+                            display: block;
+                            float: none;
+                            margin: 0 auto 10px;
+                        }
+                    }
+
+                    .overlay {
+                        max-width: 262px;
+                        max-height: 171px;
+                        height: 171px;
+                        object-fit: cover;
+                        object-position: center;
+                        z-index: 101;
+                        background: black;
+                        transition: .25s;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        right: 0;
+                        position: absolute;
+                        opacity: .5;
                     }
+
                 }
 
+
                 .program-course-card-info {
                     overflow: hidden;
                     padding: 15px;
@@ -87,7 +105,7 @@ body.new-design {
                     .start-date {
                         font-weight: 400;
                         font-size: 12px;
-                        color: rgba(112, 114, 117, 0.5);
+                        color: #58585A;
                         margin-bottom: 0.5rem;
                         transition: $product-page-hover-time;
                     }
@@ -96,25 +114,28 @@ body.new-design {
                         font-size: 14px;
                         font-weight: 600;
                         line-height: 16px;
-                        color: rgba(3, 21, 45, 0.5);
+                        color: #58585A;
                         transition: $product-page-hover-time;
                     }
                 }
 
                 &:hover {
+                    .program-course-card-info {
+                        .start-date {
+                            color: #03152D;
+                        }
+                    }
                     .start-date {
-                        color: rgba(112, 114, 117, 1);
-                        transition: $product-page-hover-time;
+                        color: #03152D;
                     }
 
                     h3 {
-                        color: rgba(3, 21, 45, 1);
-                        transition: $product-page-hover-time;
+                        color: #03152D;
                     }
-
-                    img {
-                        opacity: 1;
-                        transition: $product-page-hover-time;
+                    .image {
+                        .overlay {
+                            opacity: 0;
+                        }
                     }
                 }
             }