Hover from bottom animation

by sach_a

HTML

<div class="wrap">
    <table class="wdtable">
      <tbody>
        <tr>
          <td class="wdcol" data-id='0'><img src="https://cdn.theatlantic.com/thumbor/XdhHrsz6NSNHJJyi3aBksJpPviw=/1500x1000/media/img/photo/2025/03/winners-british-wildlife-photograph/a02_AB-RU-16/original.jpg" style="height:100%; width:100%;"/>
            <div class="floatbox">
                .floatbox1<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='1'><img src="https://cdn.theatlantic.com/thumbor/_3x2I5q1AZew4N4PoSjBn6cmtSk=/1500x1000/media/img/photo/2025/04/winners-gdt-nature-photographer-yea/a10_fitze/original.jpg" style="width:100%;"/>
            <div class="floatbox">
                .floatbox2<br/>FLOATS ON TOP
            </div>
          </td>
          <td class="wdcol" data-id='2'><img src="https://cdn.theatlantic.com/thumbor/Yi7avIaWugr-2fYSBrUC2GFshUw=/1500x1000/media/img/photo/2025/04/winners-gdt-nature-photographer-yea/a11_krikava/original.jpg" style="width:100%"/>
            <div class="floatbox">
                .floatbox3<br/>FLOATS ON TOP
            </div>
          </td>
        </tr>
      </tbody>  
    </table>
</div>

CSS

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

JavaScript

/*$(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;";
       	}
	});
});*/