Jump to content

Hover text to change image

Recommended Posts

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!

Frame 4.png

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.