Подскажите почему не высвечивается картинка

Question

Хотел сделать мини анимацию при наведении, а картинка не высвечивается. Заметил что она появляется если убрать класс у img. Но тогда не получается анимация. Как исправить? Помогите)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
 <link rel="stylesheet" href="qwe/cscs/qwe.css">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>sss</title>

<body>

  <div class="pictch">
     <div class="pictch__item">
        <img class="pictch__img" src="qwe/img/jinx2.jpg" alt="">
     </div>
  </div>
  </div>
  </section>

CSS:

  body {}

 .pictch {
  display: flex;
 justify-content: start;
}


  .pictch__item {
 width: 30%;

}

.pictch__item:hover .pictch__img img {
   opacity: .7;
   background: blue;
     color: brown;

}

.pictch__img {
  margin: 0 0 0 70px;
   width: 19%;
   height: 29%;
  border: 5px solid rgb(0, 0, 0);
   position: absolute;
  background: linear-gradient(to bottom, rgb(0, 0, 0), #000000);

  transform: translate(-950px, -150px);
 transition: color .2s linear;
}

 .pictch__img img {
      transition: opacity .1s linear;
  }

БЛОГ НА HUSL

Подскажите почему не высвечивается картинка

Ответы (0 шт):