CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
ruzD
ruzD

Reputation: 555

Bootstrap-table: popover & thumbnail:hover

I make a bootstrap-table with images, and my idea is: when the user passes the mouse over the image, it enlarges. I tried to use popover but the only it's working with button I do not know to use popover with <img> tag.

A part from this I have tried to use css style .thumbnail:hover how this:

/* 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;
}

This has a big problem when it enlarges the image, the row of the table grows too :( and it's deformed!

Could someone help me?

Upvotes: 0

Views: 895

Answers (2)

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13928

I tried improving on the answer provided by @Anil Panwar, And based on your feedback, I guess you are looking for something like below.

/* 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

Upvotes: 1

Anil Panwar
Anil Panwar

Reputation: 2622

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>[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>

Upvotes: 3

Related Questions