CSS наведения, чтобы очистить линейный градиент на фоне не удалось

Question

Я хочу очистить темный линейный градиент на моем фоновом изображении, но попробовал это, оно не будет работать, у него также есть проблема с мерцанием.

.image {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  transition: background 0.2s ease;
}

.image:hover {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
}

<div class="image">
</div>

Answer 1

другое решение: переход: фоновый цвет 0,2 с легкостью;

.image 
{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8)), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.image:hover 
{
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
}

<div class="image">
</div>

Answer 2

попробуйте это с помощью: before

.image {
  position:relative;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg') center no-repeat;
  background-size: cover;
  width: 100px;
  height: 100px;
  border-radius: 10px;
}
.image:before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content:'';
  border-radius: 10px;
  opacity:1;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
  transition: opacity 0.2s ease;
}
.image:hover:before{
  opacity:0;
}

<div class="image"></div>