Resize header images using css

Author: mauroservienti

_layouts/post.html

@@ -19,11 +19,13 @@
   </section>
 
   <header class="post-header">
-    {% if page.header_image %}
-    <img class="img-fluid rounded" alt="{{ page.title }} header image" src="{{ page.header_image | prepend: site.baseurl }}" />
-    {% else %}
-    <img class="img-fluid rounded" alt="{{ page.title }} header image" src="{{ '/img/posts/default-header.jpg' | prepend: site.baseurl }}" />
-    {% endif %}
+    <div class="post-img-crop">
+      {% if page.header_image %}
+      <img class="img-fluid" alt="{{ page.title }} header image" src="{{ page.header_image | prepend: site.baseurl }}" />
+      {% else %}
+      <img class="img-fluid" alt="{{ page.title }} header image" src="{{ '/img/posts/default-header.jpg' | prepend: site.baseurl }}" />
+      {% endif %}
+    </div>
     <h1 class="post-title">{{ page.title }}</h1>
     <p class="post-meta">
       {{ page.date | date: "%b %-d, %Y" }}{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} •

_sass/_base.scss

@@ -87,4 +87,14 @@ pre {
 
 .mermaid{
     margin-bottom: 1rem;
+}
+
+.img-crop{
+    max-height: 700px;
+    overflow: hidden;
+    margin-top: -150px;
+}
+
+.img-crop img{
+    max-height: initial;
 }

_sass/_posts.scss

@@ -9,6 +9,7 @@
 
 .post-nav{
     font-size: $small-font-size;
+    margin-bottom: 10px;
     .prev{
 
     }
@@ -19,9 +20,25 @@
 }
 
 .post-header{
-    img{
-        margin-top: 1rem;
+
+    .post-img-crop{
+        max-height: 600px;
+        overflow: hidden;
+    }
+
+    .post-img-crop img{
+        margin-top: -150px;
+    }
+
+    .post-img-crop:hover {
+        max-height: fit-content;
+        overflow: auto;
+    }
+
+    .post-img-crop img:hover{
+        margin-top: 0;
     }
+
     .post-title{
         margin-top: 1.5rem;
         margin-bottom: 1.5rem;

index.html

@@ -8,8 +8,10 @@
   <div class="card mb-3">
     {% assign first = site.posts[0] %}
     {% if first.header_image %}
+    <div class="img-crop">
     <img class="img-fluid card-img-top" alt=" {{ first.title }} header image"
       src="{{ first.header_image | prepend: site.baseurl }}" />
+    </div>
     {% endif %}
     <div class="card-body">
       <p class="card-text first-post-details">