image with caption reveal option

_includes/image_and_caption.html

@@ -2,9 +2,8 @@
 Output: image(s) with caption underneath
 Parameters:
 - image: url
-- caption: string for caption underneith
-
-* image can also be an array of images *
+- caption: string for caption underneath
+- reveal_text: (boolean) hide text until it is active
 {% endcomment %}
 
 
@@ -19,7 +18,18 @@
       <img src="{{ image }}" alt="{{ caption }}">
       {% endfor %}
     </div>
-    <div class="image-with-caption__caption-block">{{ caption }}</div>
+
+    {% if include.reveal_text %}
+      <div class="image-with-caption__caption-block -reveal" tabindex="1">
+        {{ caption }}
+      </div>
+    {% else %}
+      <div class="image-with-caption__caption-block">
+        {{ caption }}
+      </div>
+    {% endif %}
   </div>
 </div>
 
+
+

_includes/image_dictionary.html

@@ -8,7 +8,7 @@
 - grouping: (optional) string for modifying css grouping with
     - adds .group-by-{{grouping}}
     - This is used to fix the syllables at 5 across
-- reveal_text: (boolean) hide text until it is clicked
+- reveal_text: (boolean) hide text until it is active
 {% endcomment %}
 
 {% assign definitions = include.definitions %}

_pages/toki-pona/lesson-02a-syllables-2.md

@@ -73,7 +73,6 @@ Other multi-syllable words can be created simply by adding syllables together:
 
 The capsule
 
-{% include image_and_caption.html image="/images/t47_tokipona/t47_kamasona/t47_kaso09_13.jpg" caption="jan sonja li mama pi toki pona" %}
 
 #### toki pona words outside of pu
 

_pages/toki-pona/lesson-05a-gender.md

@@ -63,3 +63,8 @@ The other thing to note about _sin_ is that it can naturally take on a rectangul
 {% include image_and_caption.html image="/images/t47_tokipona/t47_kamasona/t47_kaso10_20.jpg" caption="jan sin li seme?" %}
 
 ### mama
+
+{% include image_and_caption.html image="/images/t47_tokipona/t47_kamasona/t47_kaso09_13.jpg"
+   caption="jan sonja li mama pi toki pona"
+   reveal_text=true
+%}

css/_image_dictionary.scss

@@ -51,13 +51,19 @@
   background-color: $color-white-C;
   @extend .caption;
   text-align: center;
+}
+
+// Spoiler with hover-reveal text
+.image-with-caption__caption-block,
+.image-dictionary__text {
   &.-reveal {
-      background-color: $color-green-C;
-      color: $color-green-C;
-      transition: background-color .75s, color 1s;
-      &:active, &:focus, &:hover {
-        background-color: white;
-        color: inherit;
+    width: 90%;
+    background-color: $color-green-C;
+    color: $color-green-C;
+    transition: background-color .75s, color 1s;
+    &:active, &:focus, &:hover {
+      background-color: inherit;
+      color: inherit;
     }
   }
 }