Why directive attribute doesn't works on img html tag?

I have this directive to diplay image popup on hover:

@Directive({
  selector: '[appHoverImage]'
})
export class HoverImageDirective {

  constructor(private elementRef:ElementRef, private renderer: Renderer2) { }

  @HostListener("mouseenter") onMouseEnter(){
    let elem =  this.elementRef.nativeElement;

    const imageurl = "https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
    const imgElem = document.createElement('img');
    
    imgElem.src = imageurl;
    this.renderer.addClass(imgElem, "expand-image");
    this.renderer.appendChild(this.elementRef.nativeElement, imgElem);
  }
}

Here is expand-image css class:

  .expand-image
  {
    margin: 150px;
    width: 30%;
    height: 30%;
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: white;
    border: 1px solid black;
    transform: scale(3); 
    z-index:999;
  }

Here how I use appHoverImage directive:

<img class="card-image" [src]="imageUrl" appHoverImage/>

but if I use directive on the div element:

<div appHoverImage></div>

it works perfectly.

Any idea why appHoverImage attribute doesn't works on img element?