Include card images in world overview

[AndBM]

We could include images of sites and denizens on the world overview. All the cards are available at https://oathcards.seiyria.com/ and should be accessible with some simple formatting,

cardURL = "https://oathcards.seiyria.com/assets/cards/" + cardName + ".webp"

An elegant solution might be to only display the picture when text is hovered over, like this: https://jsfiddle.net/1cxjf0nq/ .

It could even be expanded to some kind of tag in the chronicle for whenever a card is mentioned.

I am going to wait with working on this until the current refactoring is done.

[alexrutar]

This would be a really good solution!

In the linked JSfiddle, you don't need to wrap <img> in a <span> - it's already a well-behaved inline element itself! Also, trailing /> is an obsolete XHTML compatibility layer: for elements which do not require a closing tag, just end with a >.

Something like this is good:

<div class="hover_img">
  <a href="#">Show Image<img src="https://static01.nyt.com/images/2021/09/14/science/07CAT-STRIPES/07CAT-STRIPES-jumbo.jpg?quality=75&auto=webp" alt="image" height="100"></a>
</div>
<div>
  Test. Some more text.
</div>

and the CSS:

.hover_img a {
  position: relative;
}

.hover_img a img {
  position: absolute;
  display: none;
  z-index: 99;
}

.hover_img a:hover img {
  display: block;
}

[alexrutar]

Or even simpler:

<a class="hover_img" href="#">Show Image<img src="https://static01.nyt.com/images/2021/09/14/science/07CAT-STRIPES/07CAT-STRIPES-jumbo.jpg?quality=75&auto=webp" alt="image" height="100"></a>

and, using SCSS syntax,

a.hover_img {
  position: relative;
  & img {
    position: absolute;
    display: none;
    z-index: 99;
  }
  &:hover img {
    display: block;
  }
}