jquery - 引导表:弹出框和缩略图:悬停

我用图像制作了一个引导表，我的想法是：当用户将鼠标移到图像上时，它会放大。我尝试使用popover，但是它仅与按钮配合使用，我不知道将popover与<img>标记一起使用。

从这一部分，我试图使用CSS样式.thumbnail：hover：

/* IMG HOVER */

.thumbnail:hover {
    position:relative;
    top:-25px;
    left:-35px;
    width:300px;
    height:auto;
    display:block;
    border-radius: 0;
    border: 1px white solid;
    z-index:999;
}

当它放大图像时，这会产生很大的问题，表格的行也会增长:(并且变形！

有人可以帮我吗？

最佳答案

附加了演示

.thumbnail:hover {


    transform: scale(10);



}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="thumbnail" style="height:50px;width:50px"/></td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
       <td><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="thumbnail" style="height:50px;width:50px"/></td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td><img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="thumbnail" style="height:50px;width:50px"/></td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>