img 태그에 직접적으로 hover 효과 넣는 문제??

이미지 태그에 직접으로 hover 효과 넣어보려고 시도해봤는데, transition: 1s; 와
  opacity: 0.5; 속성은 잘 듣는데, background-color: black; 은 안 먹히네요. 왜 이런 현상이 일어나는지 모르겠습니다.

위의 gif 파일을 확인해보시면, 왼쪽 부츠는 강의에서 나온 방법대로 해본 거구요. 오른쪽 여자 부츠는 img 태그에 직접적으로 넣어온 결과 값입니다.

해당 질문 코드 링크

https://codepen.io/uscgil0127/pen/wvpmoXg

=> 이미지 파일을 직접적으로 집어넣을 수 없어서, 코드만 올립니다.