javascript code to put back back the image when we move mouse over

I am trying to figure out the widget that shows the image back when we move our mouse hover in

Please see the code below

<html>
    <div class="panel-thumbnail">
        <a href="https://diywebsitespro.com" title="Add Frosted Glass Effect - " class="thumb">
        <video 
            poster="https://diywebsitespro.com/wp-content/uploads/2022/11/maxresdefault-46.jpg"
            onmouseover="this.play()" 
            onmouseout="this.pause();this.currentTime=0;"
        >
        <source src="https://diywebsitespro.com/wp-content/uploads/2023/02/autoplay-on-hover.mp4" 
            type="video/ogg">
        </source>
    </div>
</html>

At this stage by default the widget shows image and when we hover over a video plays but when wer move the cursor out, it stays at black screen. can we make this to show the image when the mouse out please ?

Nothing tried as I am not a Javascript developer