On Hover Animation To Table In HTML

October 23, 2022 Post a Comment

onhover I want animation on table

Solution 1:

You can consider pseudo element to achieve such effect:

table {
 position:relative;
 z-index:0;
 overflow:hidden;
}
td {
  position:relative;
}
td:hover::before,
td:hover::after{
  content:"";
  position:absolute;
  z-index:-1;
  background:yellow;
}
td:hover::before{
  top:0;
  bottom:0;
  right:-50vw;
  left:-50vw;
}
td:hover::after {
  left:0;
  right:0;
  top:-50vh;
  bottom:-50vh;
}

<table border="1">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>