Extend SharePoint Columns using Custom Card with JSON

Recently a custom card feature is added to SharePoint List Formatting. By using that feature, SharePoint allows us to add the customized cards to the column, when ever hovering / clicking in List formatting (Column / View).

The below is the schema for custom card in Column / View formatting as follows,

{
    "customCardProps": {
        "type": "object",
        "description": "Object that defines custom card props on hover/click",
        "properties": {
            "openOnEvent": {
                "description": "Event name to decide on which the customCard should open",
                "type": "string",
                "pattern": "(click|hover)$"
            },
            "directionalHint": {
                "description": "Specify the direction relative to the target in which CustomCard will be positioned",
                "enum": [
                    "topCenter",
                    "bottomCenter",
                    "leftCenter",
                    "rightCenter"
                ]
            },
            "isBeakVisible": {
                "description": "Specify if the beak is to be shown or not",
                "type": "boolean"
            },
            "formatter": {
                "description": "JSON object that defines formatting for customCards",
                "$ref": "#/definitions/elm"
            }
        },
        "required": [
            "formatter",
            "openOnEvent"
        ]
    }
}

Based on the schema, I like to show the simple example to display the image when ever we hovering over the Title column.

Output for the above JSON snippet is pictured below,