Equal height cards. Correcting image width.

bakerydemo/static/css/main.css

@@ -617,14 +617,59 @@ time.location-time {
     width: 48%;
 }
 
+.blog-list-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.blog-list-item a {
+  display: flex;
+  flex-direction: column;
+}
+
+.blog-list-item:hover img {
+    opacity: 0.3;
+}
+
 .blog-list-item .image {
   overflow: hidden;
+  background-color: #eb7400;
 }
 
 .blog-list-item .image img {
   width: auto;
 }
 
+.blog-list-item .text {
+  background: linear-gradient(to bottom, rgba(100,100,100,0) 0%,rgba(100,100,100,0.9) 23%);
+  flex: 1 0 auto;
+  margin-top: -150px;
+  padding: 20px;
+  position: relative;
+  z-index: 1;
+}
+
+.blog-list-item .text h2 {
+  color: #fff;
+  font-weight: 200;
+  margin-top: 0;
+}
+
+.blog-list-item .text p {
+  color: #e3e3e3;
+  font-size: 0.8em;
+  margin-bottom: 0;
+}
+
+.blog-list-item .footer {
+  background-color: #333;
+  color: #fff;
+  margin-top: 0;
+  padding: 20px;
+  position: relative;
+  z-index: 1;
+}
+
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;
@@ -635,3 +680,12 @@ time.location-time {
   padding-right: 0;
   padding-left: 0;
 }
+
+/* Bootstrap Equal height rows */
+.row-eq-height {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display:         flex;
+  flex-wrap: wrap;
+}

bakerydemo/templates/blog/blog_index_page.html

@@ -15,19 +15,20 @@
         </div>
     {% endif %}
 
-        <div class="row blog-list">
+        <div class="row row-eq-height blog-list">
             {% for blog in blogs %}
                 <li class="col-md-3 blog-list-item">
                 <a href="{% pageurl blog %}">
                     <div class="image">
-                        {% image blog.image fill-750x660-c100 as image %}
+                        {% image blog.image fill-850x650-c50 as image %}
                         <img src="{{ image.url }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" class="" />
                     </div>
+                    <div class="text">
+                        <h2 class="blog-list-title">{{ blog.title }}</h2>
+                        <p>{{ blog.introduction|truncatewords:15 }}</p>
+                    </div>
 
-                    <h2 class="blog-list-title">{{ blog.title }}</h2>
-                    <p>{{ blog.introduction|truncatewords:15 }}</p>
-
-                    <div class="small blog-list-item-footer">
+                    <div class="small footer">
                         {{ blog.date_published }} by
                         {% for author in blog.authors %}
                             {{ author }}{% if not forloop.last %}, {% endif %}