Image Reveal on Text Hover

https://banjo-blenny-3atb.squarespace.com/

password: 12345

I'm hoping to achieve an image reveal when you hover over the large text in the second section of the homepage. You can see this done on a Squarespace 7.1 site here: https://www.itsquitenice.com/

Thank you!

You can use Chrome dev tools to pull the HTML:

<div class="nav-gif-wrapper">
  <a href="/larose">
    <h1 style="text-align:center">Luxury Real Estate</h1>
    <img src="https://static1.squarespace.com/static/5fe3e4d2fd86bf1144542597/t/66bff3a100fa13695b55a3ef/1723855777786/larose-thumbnail.jpg
              " alt="luxury-real-estate-branding" height="300" style="top:-55px; left:40px">
  </a>
</div>

and some of the CSS (though you may need more):

@media screen and (min-width: 640px) {
    .nav-gif-wrapper img {
        position: absolute;
    }
}

@media screen and (min-width: 640px) {
    .nav-gif-wrapper img {
        -webkit-transition: .5s;
        -moz-transition: .5s;
        transition: .5s;
        display: block;
    }
}
@media screen and (min-width: 640px) {
    .nav-gif-wrapper img {
        opacity: 0;
    }
}
.nav-gif-wrapper:hover {
    text-decoration: line-through;
    text-decoration-thickness: 3px;
}

Hopefully that gives you a start on the way this could be set up.

Alternatively, check out this plugin:

https://www.ghostplugins.com/products/p/kuro-image-hover-list