Image on a text

Question

I found a code to pass the mouse and show a text, I would like to show a photo.

It can be done with css or javascript but I don’t know the part of the photo. like this

<style>
#mostrar{<br />
  display:none;<br />
  }<br />
</style>

<div id="passar_mouse">Passar o mouse</div>
<div id="mostrar">http://tcgbrasil.com/wp-content/uploads/2017/08/Sem-Título-1-600x600.png</div>
<script>
$('#passar_mouse').mouseover(function(){
  $('#mostrar').css('display', 'block');
});

$('#passar_mouse').mouseout(function(){
  $('#mostrar').css('display', 'none');
});  
    </script>

---

But I would like the image to appear floating, I will show you what I already have , however it is a wordpress plugin.

Answer 1

I just made this little code and I think this is what you say:

$("#texto").hover(function () {
	$("#image").css('display', 'block');
  $(this).mousemove(function(e){
    	$("#image").css({left:e.pageX + 15, top:e.pageY + 15});
  });
}, function () {
   $("#image").css('display', 'none');
});

#image{
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/" style="display:none;"/>

<div id="texto">
passa aqui o mouse
</div>

Answer 2

I don’t quite understand what you want, but that would be it?

$('.mouse').mouseover(function(){
  $('.mostrar').show()
})

$('.mouse').mouseout(function(){
  $('.mostrar').hide()
})

.mostrar{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mouse">Passe o mouse aqui</div>
  <div class="mostrar">
    <img src="http://images.indianexpress.com/2016/10/got-759.jpg">
  </div>