'Adding a link to a hover picture

I currently have a picture that changes when you hover over it in Google Sites. I am unsure how to change the code to make it a clickable link as well.

Here is my current code for my hover, but when I was adding a clickable link it was not working. Can anyone help?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Change Image on Hover in CSS</title>
    <style>
        .card {
            width: 480px;
            height: 270px;
            background: url("https://drive.google.com/uc?export=view&id=1WfOqgae29zjdR5pRYhIBdBG7HC5KjJyw") no-repeat;
        }

    .card:hover {
        width: 480px;
        height: 270px;
        background: url("https://drive.google.com/uc?export=view&id=1rwRRGYIFW3oCwQ1H6e-er3S4f8k7yh5y") no-repeat;
    }
</style>
</head>
<body>
    <div class="card"></div>
</body>
</html>

hyperlink

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Adding a link to a hover picture

Sources

Related Questions