JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<table>
  <thead>
    <tr>
      <th>id</th>
      <th>image</th>
      <th>name</th>
      <th>age</th>
      <th>address</th>
      <th>phone</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1</td>
      <td>
        <div class="photo">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRKoGkbnwZMrYoYmeu9_8EffU90jyo2D2P4Bxex0ALJWixLfPhD" data-src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRKoGkbnwZMrYoYmeu9_8EffU90jyo2D2P4Bxex0ALJWixLfPhD">
        </div>
      </td>
      <td>theinlwin</td>
      <td>23</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>

    <tr>
      <td>2</td>
      <td>
        <div class="photo">
          <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR0ROe6kGoF0vFVqEe3SSP6XqgXKh1trbZMf3KaEGiWV_Z57UPj" data-src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR0ROe6kGoF0vFVqEe3SSP6XqgXKh1trbZMf3KaEGiWV_Z57UPj">
        </div>
      </td>
      <td>theinlwin</td>
      <td>23</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>

    <tr>
      <td>3</td>
      <td>
        <div class="photo">
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsDi35sZepCdDGwW1k29Olc3rGI10v0NYTfGrN_cDzMhimZGPp5w" data-src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsDi35sZepCdDGwW1k29Olc3rGI10v0NYTfGrN_cDzMhimZGPp5w">
        </div>
      </td>
      <td>theinlwin</td>
      <td>23</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>
    <tr>
      <td>4</td>
      <td>
        <div class="photo">
          <img src="http://www.axis-ballymun.ie/_fileupload/Image/axis%20gallery.JPG" data-src="http://www.axis-ballymun.ie/_fileupload/Image/axis%20gallery.JPG">
        </div>
      </td>
      <td>theinlwin</td>
      <td>24</td>
      <td>KyaukTaw</td>
      <td>78955555</td>
    </tr>
    <tr>
      <td>5</td>
      <td>
        <div class="photo">
          <img...

CSS

table {
  display: table;
  border: 1px solid #ddd;
  table-layout: fixed;
  border-collapse: collapse;
}

th,
tfoot td {
  color: #000;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  padding: 20px;
  margin: 0;
  font-size: 30px;
  brder-right: 1px solid #ddd;
}

td {
  color: #fff;
  background-color: #000;
  border: 1px solid #ddd;
  margin: 0;
  width: 200px;
  text-align: center;
}

.photo {
  width: 200px;
  cursor: pointer;
  position:relative;
}

.photo img {
  width:100%;
}

tr {
  margin: 0;
  padding: 0;
}

.galleryBox {
  width: 600px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  overflow: hidden;
  position: absolute;
  left:220px;
  box-shadow:1px 1px 10px #fff;
  height:360px;
}

JavaScript

$("table td .photo").hover(function(e) {
   		var $imageUrl = $(this).find('img').attr('data-src');
      var $element = "<div class='galleryBox' style='top:0'><img src='"+ $imageUrl + "'></div>";
      $('.galleryBox').remove();
      
      var $table_count = $('tbody tr').length;
      var $row_count =  $(this).closest("tr").index();
      
      console.log("$table_count ===>" + $table_count);
      console.log("$row_count ===>" + $row_count);
      
      $(this).append($element);
      
 });