Coding HTML CSS Web Design

How to create blur effect on Table

How to create blur effect on Table September 19, 2015Leave a comment
hover efek blur

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

Leave a Reply

Your email address will not be published. Required fields are marked *