Remove an overlay of a div on hover - html

Question

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

Answer 1

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

Answer 2

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>