In This Tutorial, I Would like to share how to create blur effect on table. This efect wil cause entire rows bill blurred except hovered row.

Table Structure

To Make blur effect, you can create table like this:

<table>
  <tbody>
    <tr>
      <th>Baris</th>
      <th>Kolom 1</th>
      <th>Kolom 2</th>
      <th>Kolom 3</th>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
    <tr>
      <th>Baris 1</th>
      <td>isi</td>
      <td>isi</td>
      <td>isi</td>
    </tr>
  </tbody>
</table>

And Then, You can create CSS file like this:

table th,table td{
  border:1px solid #eee;
  padding:5px 10px;
  text-align:center;
}
/* Zebra Effect */
/* Odd Row with dark background */
table tr:nth-child(odd){
  background:#e0e0e0;
}
/* Even Row with light background */
table tr:nth-child(even){
  background:#f0f0f0;
}
/* Blur entire Rows when hover */
table tbody:hover td{
  color:transparent;
  text-shadow:0 0 2px #555;
}
/* Do Not Blur hovered row*/
table tbody tr:hover td{
  color:#000;
  text-shadow:none;
}

Result:

See the Pen Efek Blur pada tabel by HUMAYRAA (@humayraadotcom) on CodePen.0

Incoming search terms:

(Visited 80 times, 1 visits today)