CODEWITHSUNDEEP
htmlcss
Jacky Nguyen
Jacky Nguyen

Reputation: 27

How to fix gradient transition on hover

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>

Upvotes: 1

Views: 148

Answers (1)

Temani Afif
Temani Afif

Reputation: 272618

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>

Upvotes: 1

Related Questions