javascript - image pop up on a steady position -

what right syntax make pop image show on left side of screen?

jquery

$("#qm3").mouseover(function(){     $("#osf").show(); }); $("#qm3").mouseout(function(){     $("#osf").hide(); }); 

html

<span><input type="text" id="tb1"><img id="qm3" src="images/webresource.png"></img></span><span><img id="osf" src="images/osf.jpg" style="position: right; display:none;"></img></span> 

as of now, whenever i'm pointing mouse qm3, pop shows, affects positioning of page.

http://codepen.io/anon/pen/venzek

this simplified, if rid of spans , wrap div around it:

http://codepen.io/anon/pen/opygog

js

$(".show").hover(function(){  $(this).next('img.hide').fadetoggle(); }); 

html

<div>   <input type="text" id="tb1">   <img class='show' src="http://placekitten.com/42/41"/>   <img class="hide" src="http://placekitten.com/40/41"/> </div> 

css

div { postition:relative; padding-left:45px;} .hide { display:none;  position:absolute; left:5px; }