In one of my projects I would like to display an image when I write in my input.

I have already written this code with HTML and Bootstrap which already allows me to display the image when I click on my input :

<div class="form-floating mb-3 bg-image hover-zoom">
     <input class="form-control" id="chemin_ad" name="chemin_ad" type="text" placeholder="Chemin dans l'AD" data-bs-show="collapse" data-bs-target="#exempleImage" aria-expanded="false" aria-controls="exempleImage" />
     <label for="chemin_ad">Chemin dans l'AD</label>
</div>

<div class="collapsing" id="exempleImage">
     <img class="img-fluid" src="<?php echo $chemin ?>assets/img/exemple.png" alt="Chemin de l'AD"/>
</div>

Great ! but when I leave the input the image remains displayed and I need to click again on the input to make it disappear...

Is there a way I can only display it when I'm inside my input with Bootstrap? Or with a JavaScript function?