Jquery 将鼠标悬停在图像上，在页面右侧的滑块中显示其放大图像和滑块中的所有图像

我尝试了所有我知道是干的：鼠标在缩略图上显示它应该放大页面其余部分的图像。如果我在两个图像之间切换，该图像应该放大。有3个图像，即2个缩略图和一个主图像在一个小的大img中，比如说我，在页面的左侧，当我将鼠标悬停在上面时，它应该在右侧的滑块中显示一个放大的图像，其中包含3个图像。单击侧箭头时，应该一次显示一个图像。。。我希望我已经澄清了

<style>

.product .content .imgdiv .bottlesWrapper .ablahh{
 position: relative;
   z-index: 0;
 }

   .product .content .imgdiv .bottlesWrapper .ablahh:hover{
  background-color: transparent;
     z-index: 50;
    }

     .product .fltimg .thumbnail span{ /*CSS for enlarged image*/
   width:200px;
 height:200px;
  position: absolute;
 background-color: lightyellow;
  padding: 5px;
  left: -1000px;
border: 1px dashed gray;
 visibility: visible;
  color: black;
  text-decoration: none;
}

  .product .fltimg .thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
  padding: 2px;
 }

    .product  .fltimg .thumbnail:hover span{ /*CSS for enlarged image on hover*/
 visibility: visible;
   top:10px;
  left: 60px; /*position where enlarged image should offset horizontally */

  }


 </style>

---

请让我知道我应该如何做到这一点。我在这件事上发疯了谢谢

请制作一个JSFIDLE示例。请单击此处放大的图像滑块应覆盖在右侧部分，而不是图像和缩略图上显示JSFIDLE不上载图像。。。。。。。。。。。。但是同样的代码从我的系统上传图像。。。。。。。。。我不知道出了什么问题左边的初始缩略图：-1000px位置，那么我如何悬停它..？我们必须在哪一类鼠标悬停

 <div class="fltimg">
 <a href="#" class="thumbnail"><span>
<img id="largeImage" src="images/1.jpg"/></span></a>
  </div>
  <div class="content">
   <p class="note">Fields with <span class="required">*</span> are required.</p>

 <div class="imgdiv">
      <div class="bottlesWrapper">
     <a href="#" class="ablahh">
    <img id="blah" class="i1" src="#" width="115px" height="120px"/></a>

    </div>


 <div class="thumbs">
   <a href="#" class="ablah1">  <img id="blah1" class="i2" src="#" width="50px" height="20px"/></a>
      <a href="#" class="ablah2"><img id="blah2" class="i3" src="#" width="50px" height="20px"/></a>
    </div>
     </div>
   <!-- <a href="#" class="ablah"> <span> <img id="blah0" class="i11" src="#" width="500px"       height="300px"/> </span> </a>-->


<div class="title4">
<input class="file" name="logo" type="file"/>
</div>

<div class="title4">

    <input class="file1" id="files1" name="files1" type="file" />

</div>

<div class="title4">
    <input class="file2" id="files2" name="files2" type="file"/>

</div>

</div>