How to change opacity of every data element on hover in a table using CSS ?

There is a Table made by using HTML in which data elements are set to a low opacity. The task is to change the opacity of a particular element when user hover over data elements.

To make a table look better, we will use gradient colors to set backgrounds of the table data elements. In this approach, we will be using the opacity property of CSS to complete the task.

opacity: The opacity property is used in the image to describe the transparency of the image. The value of opacity lies between 0.0 to 1.0 where the low value represents high transparent and high value represents low transparent.

Approach: 

  • First Make the HTML file with defining the Table and its data.
    <table>
      <tr>
        <td> data 1</td>
        <td> data 2</td>
        <td> data 3</td>
      </tr>
    </table>
    
  • The table heading tags <th> is styled with white text and gradient background color.
  • For table data element tags <td> opacity is set to 0.7 initially, with light gradient background which seems faded initially.
  • On hover, the opacity of element is set to 1, this makes the element clear and defined.
    td:nth-child(odd):hover {
        opacity: 1;
    }
    

    For all odd child of <td> tag



    td:nth-child(even):hover{
        opacity: 1;
    }
    

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Table Styling</title>
      
    <style>
        h1 {
            text-align: center;
            margin-top: 5vw;
            color: green;
        }
  
        table {
            margin-left: 25vw;
        }
  
        th {
            text-align: center;
            width: 200px;
            color: white;
            background-image:linear-gradient(
                to bottom, #6B8E23, #556B2F);
            height: 40px;
            padding: 0px 10px;
            border-bottom: 3px solid #9ACD32;
            border-radius: 5px 5px 0px 0px;
        }
  
        td:nth-child(odd):hover {
            opacity: 1;
        }
  
        td:nth-child(even):hover {
            opacity: 1;
        }
  
        td {
            opacity: 0.7;
            border-radius: 2px;
            text-align: center;
            vertical-align: middle;
            height: 40px;
            background: rgb(144, 238, 144, 0.3);
            padding: 0px 10px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Address</th>
        </tr>
        <tr>
            <td>Name 1</td>
            <td>Age 1</td>
            <td>Address 1</td>
        </tr>
        <tr>
            <td>Name 2</td>
            <td>Age 2</td>
            <td>Address 2</td>
        </tr>
        <tr>
            <td>Name 3</td>
            <td>Age 3</td>
            <td>Address 3</td>
        </tr>
        <tr>
            <td>Name 4</td>
            <td>Age 4</td>
            <td>Address 4</td>
        </tr>
    </table>
</body>
  
</html>

chevron_right


Output:

You can see that when mouse hover over <td> elements, their opacity changes to 1 and they seem more clear and defined.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.