product Image error red box help

Hello, I would love some help please.

As the title suggests I have created a child theme for the first time and entered this code into functions.php

function myfunc_product_img_link_start(){
global $product;
$link = apply_filters( ‘woocommerce_loop_product_link’, get_the_permalink(), $product );
echo ‘‘;
}
add_action(‘woocommerce_before_shop_loop_item_title’, ‘myfunc_product_img_link_start’, 5);

function myfunc_product_img_link_close(){
echo ‘‘;
}

add_action(‘woocommerce_before_shop_loop_item_title’, ‘myfunc_product_img_link_close’, 15);

I then added this to the customise CSS section

li.product .product-thumb-wrap::before {
display: none !important;
}
.custom_item_img_link::before{
content: ” “;
position: absolute;
height: 100%;
width: 100%;
background: #fa6161;
-webkit-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
opacity: 0;
}
li.product:hover .custom_item_img_link::before {
opacity: 0.8;
}

It has worked my product images are clickable! However when I hover over the image before I click it a pink block appears which is the size of the entire image + writing together but appears starting in the middle of the image and goes to the right. Very odd.

I know very little so would love it spelling out to me.

Thanks so much!