在悬停时删除div的叠加层

Question

我有一个带背景图像和线性渐变叠加的div。当div悬停在上面时，我想将线性渐变转换为完全透明。

.board-grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.board-focus {
  margin: 10px;
  background: #FFF;
  text-decoration: None;
  border-radius: 10px;
  height:30vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.board-name {
  text-transform: uppercase;
  //max-width: 50%;
  color: #FFF;
}

<div class="board-grid">
  <a href=''>
    <div class="board-focus" style="background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(https://placeimg.com/480/300/any); background-size: cover; background-position: center center; background-repeat: no-repeat;">
      <div class="board-name">
        <p>John Doe</p>
      </div>
    </div>
  </a>
</div>

Fiddle

Answer 1

＆＃13;

＆＃13;

  .board-grid {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

    .board-focus {
        margin: 10px;
        background: #FFF;
        border-radius: 10px;
        height:30vh;
        width:25vw;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .board-name {
        text-transform: uppercase;
        max-width: 50%;
        color: #FFF;
        z-index: 999;
    }
    .board-focus::after{
        content: ' ' ;
        background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5));
        position: absolute;
        display: block;
        width:100%;
        top:0;
        left:0;
        height:100%;
        border-radius: 10px;
        z-index: 10;
    }
    .board-focus:hover::after{
        content: ' ';
        display: none;
    }

＆＃13;

<div class="board-grid">
    <a href='' style="text-decoration: none">
        <div class="board-focus" style="background-image: url(https://placeimg.com/480/300/any); background-size: cover; background-position: center center; background-repeat: no-repeat;">
            <div class="board-name">
                <p>John Doe</p>
            </div>
        </div>
    </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用以下代码

＆＃13;

＆＃13;

.board-grid {
  display: flex;
  justify-content: center;
  flex-direction: row;
}
.board-focus {
  margin: 10px;
  background: #FFF;
  text-decoration: None;
  border-radius: 10px;
  height:30vh;
  width:25vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(https://placeimg.com/480/300/any);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.board-name {
  text-transform: uppercase;
  // max-width: 50%;
  color: #FFF;
  }
  .board-focus:hover
  {
    background-image:url(https://placeimg.com/480/300/any);;
  }

＆＃13;

   <div class="board-grid">
  <a href=''><div class="board-focus" style="">
  <div class="board-name">
      <p>John Doe</p>
  </div>
</div></a>
</div>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;