JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<table id="myTable">
  <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>abc</td>
      <td>23</td>
      <td>Ygngon</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>abc</td>
      <td>23</td>
      <td>yangon</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>abc</td>
      <td>23</td>
      <td>Yangon</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>abc</td>
      <td>24</td>
      <td>Yangon</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;
	position:relative;
}

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

.photo img {
  max-width: 200px;
	height:150px;
}

tr {
  margin: 0;
  padding: 0;
}

.galleryBox {
  width: 400px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid red;
  overflow: hidden;
  position: absolute;
	left:375px;
}
tbody{
	position:relative;
}

JavaScript

var $table_length = ('#myTable tr').length-1;
  $("table td .photo").hover(function(e) {
   		var $imageUrl = $(this).find('img').attr('data-src');
      var $element = "<div class='galleryBox' style='top:0px'><img src='"+ $imageUrl + "'></div>";
      $('.galleryBox').remove();
			$(this).append($element);
			
			var $tr_index = $(this).parent().parent().index() + 1;
			var $tr_height = $(this).parent().height();
			var $pos = $tr_index * $tr_height - 75;
			if($table_length - $tr_index < 4){
			    $pos =  $table_length - $tr_index;
					$bottom = $pos * $tr_height + 80;
					console.log($bottom);
					$(this).find('.galleryBox').css({'top':'', 'bottom': $bottom + 'px'});
			} else{
			    $(this).find('.galleryBox').css({'top': $pos+'px', 'bottom': ''});
			   
			}
						
 });