diff --git a/_includes/page-intro.html b/_includes/page-intro.html
index 4ed2333ac..a5bb29509 100644
--- a/_includes/page-intro.html
+++ b/_includes/page-intro.html
@@ -7,6 +7,8 @@
{% assign intro_image = intro_image | escape %}

+ {% if page.image.caption %}
{{ page.image.caption | markdownify | strip_newlines | remove: "" | remove: "
" }}{% endif %}
+
{% endif %}
diff --git a/_sass/basically-basic/_intro.scss b/_sass/basically-basic/_intro.scss
index feec9de93..2e6bb9552 100644
--- a/_sass/basically-basic/_intro.scss
+++ b/_sass/basically-basic/_intro.scss
@@ -28,6 +28,30 @@
img {
width: 100%;
}
+ .image-caption {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ margin: 0 auto;
+ padding: 2px 5px;
+ color: #fff;
+ font-family: $base-font-family;
+ font-size: $min-font-size;
+ background: #000;
+ text-align: right;
+ z-index: 5;
+ opacity: 0.5;
+ border-radius: $border-radius 0 0 0;
+
+ @include breakpoint($large) {
+ padding: 5px 10px;
+ }
+
+ a {
+ color: #fff;
+ text-decoration: none;
+ }
+ }
}
.intro-text {
diff --git a/_sass/basically-basic/_print.scss b/_sass/basically-basic/_print.scss
index 61fdf91c8..c03d150cc 100644
--- a/_sass/basically-basic/_print.scss
+++ b/_sass/basically-basic/_print.scss
@@ -235,6 +235,18 @@
color: #000;
}
+ .intro-image {
+ .image-caption {
+ color: #000 !important;
+ background: #fff !important;
+ opacity: 1;
+
+ a {
+ color: #000 !important;
+ }
+ }
+ }
+
/*
Hide the following elements on print
========================================================================== */