I wanted to share this character dialogue code I made!!!

Sorry if its not so great, I'm kinda mediocre at HTML.

Here's a reference of what it looks like

the dialogue bubble appears when you hover over the character!! I'd upload it as a layout but they disabled the feature to upload.

Lmk if you have any questions or suggest any changes for this!

Anyways, heres the code!!!

have fun!! no need to credit! 

<style>

    .shark {

        position: fixed;

        right: 1px;

        bottom: 0px;

        z-index: 350;

    }

    .dialogue {

        position: fixed;

        right: 50px;

        bottom: 200px;

        display: none;

        z-index: 351;

    }

    .shark:hover + .dialogue {

        display: block;

    }

    .dialogue img {

        width: 150px;

    }

    .dialogue-text {

        position: absolute;

        top: 45%;

        left: 50%;

        transform: translate(-50%, -50%);

        color: black;

        font-size: 14px;

        font-family: Verdana, sans-serif;

        text-align: center;

    }

</style>

<div class="shark">

    <img src="https://i.pinimg.com/originals/b5/43/24/b54324590ea3c1dc5b5ac2b396ed6d64.gif" height="200"/> <!-- Paste your image link in the quotes! To upload one you can use like ImgBB or something -->

</div>

<div class="dialogue">

    <img src="https://i.ibb.co/qC8YSKX/dialogueshark.png" alt="dialogueshark"/>

    <div class="dialogue-text">this is dialogue</div> <!-- Replace "this is dialogue" with whatever you want!! -->

</div>