diff --git a/sass/_utils.scss b/sass/_utils.scss index 0886b73516154743918d31bf9b0f54f22e820ecc..496758d8108d257b5944f38224679643590fc54a 100644 --- a/sass/_utils.scss +++ b/sass/_utils.scss @@ -5,6 +5,23 @@ .caption { position: absolute; + width: 100%; opacity: 75%; + padding: 4px 4px 4px 4px; bottom: 0; } + +.caption:hover>figcaption { + height: 100%; + text-wrap: wrap; +} + +.caption>figcaption { + display: block; + margin: 0 0 0 0!important; + padding-top: 3px; + position: relative; + width: 100%; + overflow: hidden; + text-wrap: wrap; +} diff --git a/templates/blog/post.html b/templates/blog/post.html index 025ef3eb1916488ea7ef604e38cca8f86a090412..6713200021a68a00dedb3f4d8d33f0c7a9a97598 100644 --- a/templates/blog/post.html +++ b/templates/blog/post.html @@ -15,7 +15,9 @@ {% set image = resize_image(path="@/" ~ post.colocated_path ~ "/" ~ post.extra.depiction.image, width=800, height=600) -%} <img src="{{ image.url }}" alt="{{ post.extra.depiction.alt }}" /> {% if post.extra.depiction.credits %} - <figcaption class="tag has-text-white has-background-black is-size-7 is-italic m-1 caption">{{ post.extra.depiction.credits }}</figcaption> + <div class="caption"> + <figcaption class="tag has-text-white has-background-black is-size-7 is-italic m-1">{{ post.extra.depiction.credits }} aaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbb</figcaption> + </div> {% endif %} </figure> </div>