How to fix gradient transition on hover

Question

I'm currently working on a hover transition from background to background gradient. But I want it to change the table row but instead it changes the whole background of the table.

Here's JSFiddle to show what happens when you hover on the table row

I've tried using display block which changes the table row background with a transition but then it messes up my whole table row.

The background of the table changes but is has to change the table row only.

.container #table {
  width: 100%;
  font-weight: bold;
  border-spacing: 0px 15px;
}
.container #table tr {
  position: relative;
  background-color: #273240;
  z-index: 1;
}
.container #table tr::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #0089e0, #c0c1c1);
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}
.container #table tr:hover::before {
  opacity: 1;
}
.container #table tr th {
  height: 35px;
  font-size: 10px;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #273240;
}
.container #table tr th:nth-child(n+5) {
  width: 75px;
}
.container #table tr td {
  padding: 0px;
  font-size: 12px;
  font-style: italic;
}
.container #table tr td:first-child {
  width: 25px;
  font-style: normal;
  font-weight: 500;
  padding-left: 25px;
}
.container #table tr td div {
  max-height: 70px;
  padding: 25px 0px;
  transition: max-height 0.5s, padding 0.5s;
}
.container #table tr td i {
  font-size: 12px;
}

<div class="container">
<table id="table">
  <tr>
    <th></th>
    <th>POS</th>
    <th>TEAM</th>
    <th>DRIVER</th>
    <th>MUG</th>
    <th>SPA</th>
    <th>BRN</th>
    <th>POR</th>
    <th>BAR</th>
    <th>TOT</th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td>1ST</td>
      <td>PROSPORT PERFORMANCE (85)</td>
      <td>ROBERT RENAUER</td>
      <td>24</td>
      <td>28</td>
      <td>33</td>
      <td>-</td>
      <td>-</td>
      <td>85</td>  
    </tr>
  </tbody>
</table>
</div>

That's because you can't set a `tr`'s `position` to `relative`. https://stackoverflow.com/a/6746339/863110. Why do you need the `::before` anyway? — Mosh Feu, May 27 '19 at 09:12
To fake the transition with opacity since a background transition doens't work with gradients. Should I make a table with divs instead ? — Jacky Nguyen, May 27 '19 at 09:15
Maybe [this](https://stackoverflow.com/a/7919377/863110) could help. — Mosh Feu, May 27 '19 at 09:23

score 1 · Accepted Answer · answered May 27 '19 at 10:17

Make the background and the pseudo element on th/td instead and use background-attachment:fixed to simulate a continuous background:

.container #table {
  width: 100%;
  font-weight: bold;
  border-spacing: 0px 15px;
}
.container #table tr >* {
  position: relative;
  background-color: #273240;
  z-index: 1;
}
.container #table tr > *::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #0089e0, #c0c1c1) fixed;
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}
.container #table tr:hover > *::before {
  opacity: 1;
}
.container #table tr th {
  height: 35px;
  font-size: 10px;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #273240;
}
.container #table tr th:nth-child(n+5) {
  width: 75px;
}
.container #table tr td {
  padding: 0px;
  font-size: 12px;
  font-style: italic;
}
.container #table tr td:first-child {
  width: 25px;
  font-style: normal;
  font-weight: 500;
  padding-left: 25px;
}

<div class="container">
<table id="table">
  <tr>
    <th></th>
    <th>POS</th>
    <th>TEAM</th>
    <th>DRIVER</th>
    <th>MUG</th>
    <th>SPA</th>
    <th>BRN</th>
    <th>POR</th>
    <th>BAR</th>
    <th>TOT</th>
  </tr>
  <tbody>
    <tr>
      <td></td>
      <td>1ST</td>
      <td>PROSPORT PERFORMANCE (85)</td>
      <td>ROBERT RENAUER</td>
      <td>24</td>
      <td>28</td>
      <td>33</td>
      <td>-</td>
      <td>-</td>
      <td>85</td>  
    </tr>
  </tbody>
</table>
</div>

How to fix gradient transition on hover

1 Answers1