Question

我用图像制作一个自举表，我的想法是：当用户将鼠标移到图像上时，它会放大。我尝试使用popover但是只使用了按钮我不知道使用带有<img>标记的popover。

这部分我尝试使用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;
}

当放大图像时，这会有一个很大的问题，桌子的行也会变大:(并且它会变形！

有人可以帮助我吗？

Answer 1

DEMO ATTACHED

.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>john@example.com</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>mary@example.com</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>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

我尝试改进@Anil Panwar提供的答案，根据您的反馈，我猜您正在寻找类似下面的内容。

/* CSS */
.thumbnail:hover {
    transform: scale(3);
    -moz-transform-origin: top left;
    -o-transform-origin: top left;
    -webkit-transform-origin: top left;
    transition:0.25s;
}
tr:last-of-type .thumbnail:hover {
    -moz-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    -webkit-transform-origin: bottom left;
}

<强> Demo

Bootstrap-table：popover＆amp;缩略图：悬停

2 个答案: