Library view column hover card - json column formatting

[SteveHendy]

I would like to share my json code for a hover card for a library containing images.  It uses the Name column to display the hover card.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "position": "relative",
        "width": "50px",
        "height": "50px",
        "margin-right": "10px"
      },
      "customCardProps": {
        "openOnEvent": "hover",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "black"
        },
        "formatter": {
          "elmType": "img",
          "attributes": {
            "src": "@thumbnail.673x506"
          },
          "style": {
            "border-style": "solid",
            "max-height": "500px"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "bottom": "10px",
                "font-size": "18px",
                "font-weight": "550",
                "background-color": "rgba(255, 153, 51, 0.6)",
                "padding": "2px",
                "right": "4rem",
                "border-style": "solid",
                "border-width": "1px"
              },
              "txtContent": "=join(@currentField, '\n')"
            }
          ]
        }
      },
      "attributes": {
        "src": "='https://path to library/'+ (@currentField)"
      }
    },
    {
      "elmType": "span",
      "style": {
        "position": "relative",
        "margin-top": "-10px"
      },
      "txtContent": "=join(@currentField, '\n')"
    }
  ]
}