Hover text to change image

Site URL: https://www.ambergchen.com/about

I'm trying to change the image on my about me page when I hover over the blue highlighted text

The best example I've seen of this is https://www.ivettefelixuy.com/about - screen recording attached

The text is a markdown block, and I created the blue text using span... I'm not sure how to get the image to change when I hover over the text though.

Outside of designing, I love creating through <span class="bio2" style="color:#326DD4">video games</span> and <span class="bio2" style="color:#326DD4">nail art</span>, scrolling through <span class="bio3" style="color:#326DD4">cat instagrams</span>, and sharing <span class="bio4" style="color:#326DD4">yummy foods</span> with family and friends.</span> 

I've tested some things, like sibling hover effects along these lines:

.sibling-hover, #parent {
    cursor: pointer;
}
.sibling-hover:hover ~ .sibling-highlight {
    background-color: red;
    color: white;
}
#parent:hover .parent-highlight {
    background-color: red;
    color: white;
}

but I don't think the image and span text have a sibling or parent relationship..

Pass: WIP

Hope this explanation makes sense, I'm so lost!

Hi,

Do/will you use Personal or Business Plan? Each plan will have a different solution to solve this