CODEWITHSUNDEEP
htmlcsshoverlinear-gradients
Chris
Chris

Reputation: 365

Remove an overlay of a div on hover

I have a div with a background image and a linear-gradient overlay. I would like to transition the linear-gradient to completely transparent when the div is hovered over.

.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

Upvotes: 0

Views: 2793

Answers (2)

Muhammad Usman
Muhammad Usman

Reputation: 357

  .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;
    }
<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>

Upvotes: 3

Rome
Rome

Reputation: 603

You Can use code like below 

.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);;
  }
   <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>

Upvotes: 0

Related Questions