Tengo un texto y quiero que aparezca una imagen al pasar el mouse por arriba de una frase. Esta es la forma que encontré, pero quisiera que el texto que sigue abajo (las zetas) no se desplace al aparecer la imagen. Hay forma de que la imagen aparezca cubriendo el texto que sigue en lugar de desplazandolo? osea que aparezca arriba de las zetas? O mejor aún, hay forma de elegir en que parte de la pantalla aparecerá la imagen? O eso no es posible con JavaScript?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<style>
p {font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font:bold;
font-size:16px;
}
span{
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font:bold;
font-size:16px;
}
</style>
<script type="text/javascript">
function mostrar(id,tipo)
{
if (tipo==1)
{
$("#"+id).show("slow");
}
if(tipo==2)
{
$("#"+id).hide("slow");
}
}
</script>
</head>
<body>
<section>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
<div class="container hovring">
<ul>
<li>
<span id="mostrar" onmouseover="mostrar('imagen_mostrar',1);" onmouseout="mostrar('imagen_mostrar',2);">SOME TEXT</span>
<br>
<label id="imagen_mostrar" style="display:none;"><img src="../imagenes/fotosINFO/hair.jpg" alt=""></label>
</li>
</ul>
</div>
<p>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</p>
</section>
</body>
</html>