Image Flipper Woocommerce image resolution to low

I was looking for a way to make a "flip image" in the woocommerce product loop when you hover mouse, I know there are plugins that do this function but I think it's a very simple thing to need to use a plugin, I've been searching and I ended up finding a solution.

here's the code:

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );

function custom_loop_product_thumbnail() {

    global $product;
    
    $attachment_ids = $product->get_gallery_image_ids();
    $secondary_image_id = $attachment_ids['0'];

    echo wp_get_attachment_image($secondary_image_id);
    
}

and the css:

ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1){
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
ul.products li.product a.woocommerce-LoopProduct-link img:nth-child(1):hover {
  opacity: 0;
  transition: opacity 0.5s;
}

my code did the job but the image is coming at a very low resolution

is there a way for it not to appear with such a low resolution?

I'm using a storefront child theme

nevermind I found out that some information was missing in my code here is the solution I found:

you need to set the image size: wp_get_attachment_image();

//set image size full size
wp_get_attachment_image($secondary_image_id, 'full');

//set image size medium size
wp_get_attachment_image($secondary_image_id, 'medium');

//set image size thumbanil size (default)
wp_get_attachment_image($secondary_image_id, 'thumbnail');

add_action( 'woocommerce_before_shop_loop_item_title', 'custom_loop_product_thumbnail', 10 );

function custom_loop_product_thumbnail() {

    global $product;
    
    $attachment_ids = $product->get_gallery_image_ids();
    $secondary_image_id = $attachment_ids['0'];

    echo wp_get_attachment_image($secondary_image_id, 'full');
    
}