:hover working on firefox, not on chrome, ie

Question

I made a page with this simple css hover animation but I have just noticed it does only work on firefox. Why ?

I tested with some js but I have same results.

It should not use absolute pos, preferably no js also.

/*$(document).ready(function() {
	$(".wdcol").on({
        mouseenter: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="top:-24%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
		},
        mouseleave: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="top:5%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
       	}
	});
});*/

.wrap {
    margin-right:0px;
    padding:5px;
    height:19vw;
    margin-right:2px;
    background:#b5e7dc;
    border:solid 1px black;
    white-space: nowrap;
    overflow:hidden;
    cursor:pointer;
}
table.wdtable {
    width:100%;
    background:#c0dce6;
    border:dotted 1px black;
    overflow:hidden;
}
td.wdcol {
    width:33%;
    background:#c0dce6;
    border:dotted 1px black;
}
.floatbox {
    position:relative;
    display:block;
    padding:10px;
    padding-bottom:50px;
    background:#c8e5df;
    border:dashed 1px black;
    top:5%;
    z-index:1;
    cursor:initial;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
td.wdcol:hover .floatbox {
	top:-24%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

<div class="wrap">
    <table class="wdtable">
      <tbody>
        <tr>
          <td class="wdcol" data-id='0'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox1<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='1'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%;"/>
            <div class="floatbox">
                .floatbox2<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='2'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox3<br/>FLOATS ON TOP
            </div>
          </td>
        </tr>
      </tbody>  
    </table>
</div>

Answer 1

Change top to margin-top & td vertical-align:top;

/*$(document).ready(function() {
	$(".wdcol").on({
        mouseenter: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="margin-top:-24%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
		},
        mouseleave: function () {
        	var _id=$(this).attr('data-id');
        	$(".floatbox")[_id].style.cssText="margin-top:5%;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;";
       	}
	});
});*/

.wrap {
    margin-right:0px;
    padding:5px;
    height:19vw;
    margin-right:2px;
    background:#b5e7dc;
    border:solid 1px black;
    white-space: nowrap;
    overflow:hidden;
    cursor:pointer;
}
table.wdtable {
    width:100%;
    background:#c0dce6;
    border:dotted 1px black;
    overflow:hidden;
}
td.wdcol {
    width:33%;
    background:#c0dce6;
    border:dotted 1px black;
    vertical-align:top;
}
.floatbox {
    position:relative;
    display:block;
    padding:10px;
    padding-bottom:50px;
    background:#c8e5df;
    border:dashed 1px black;
    margin-top:5%;
    z-index:1;
    cursor:initial;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
td.wdcol:hover .floatbox {
	margin-top:-24%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

<div class="wrap">
    <table class="wdtable">
      <tbody>
        <tr>
          <td class="wdcol" data-id='0'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox1<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='1'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%;"/>
            <div class="floatbox">
                .floatbox2<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='2'><img src="http://wallpaperspicturesphotos.com/wp-content/uploads/2015/02/adidas-football-wallpaper-hd-1080p.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox3<br/>FLOATS ON TOP
            </div>
          </td>
        </tr>
      </tbody>  
    </table>
</div>

Answer 2

I can't exactly answer the question "why" it doesn't work. I think it is related to the different implementation of table sets in the different browsers…

However I can give you a version that will work. Instead of using a relative position of the div container, use an absolute one and make the table cell relative:

td.wdcol {
    position: relative;
}

.floatbox {
    bottom: -70%;
    left: 0;
    position: absolute;
    right: 0;
}

td.wdcol:hover .floatbox {
    bottom: -24%;
}

Demo: JSFiddle