image rollover on hover

Hello everyone.

I am using the merauke theme and I am facing the following issue:

In my homepage appear all the featured images of my pages, like this (inside a loop ofc).

<article class="portfolio" data-categories="<?php echo $term->name; ?>">
                    	<a href="<?php echo get_permalink(); ?>" class="p-full-link">
                        	<div class="portfolio-item-wrapper">
                        		<div class="portfolio-context">
                                    		<?php echo '<h2>' . get_the_title() . '</h2>'; ?>
                    			</div>
                    			<img src="<?php echo $image; ?>" alt="<?php echo get_the_title(); ?>" >
                         		<div class="portfolio-item-background">
                         	</div>
                     	</a>
                    </article>

What I am trying to do is change the image source on hover. So what I am doing is that:

<article class="portfolio" data-categories="<?php echo $term->name; ?>">
                    	<a href="<?php echo get_permalink(); ?>" class="p-full-link">
                        	<div class="portfolio-item-wrapper">
                        		<div class="portfolio-context">
                                    		<?php echo '<h2>' . get_the_title() . '</h2>'; ?>
                    			</div>
                    			<img src="<?php echo $image; ?>" alt="<?php echo get_the_title(); ?>" onmouseover="this.src='https://www.example.com/image2.png'" onmouseout="this.src='https://www.example.com/image1.png'">
                         		<div class="portfolio-item-background">
                         	</div>
                     	</a>
                    </article>

Still this will not work, despite that I apply the same method in some images that have an explicit src attribute (not using the $image) and it works perfectly.

What could be the solution?

Thanks in advance