Image reveal on hover of text link

Site URL: https://mishayeung.com

Hi there,

I would like to reveal image on the left side on hover of text link like the demo below,

different text links reveal different images

Demo: https://readcereal.com

Thank you!

Hi @MishaY, this would need some level of coding to achieve this look in Squarespace. Having a quick look around, this may work as a solution with the right styling:
https://schwartz-edmisten.com/blog/text-and-image-hover-layout-in-squarespace-71

Or alternatively this plugin might be helpful though does something slightly different:
https://www.ghostplugins.com/products/keito-image-changer

If neither of these works for you, you may want to hire someone to write and implement a coded solution for you.

20 hours ago, Ziggy said:

Hi @MishaY, this would need some level of coding to achieve this look in Squarespace. Having a quick look around, this may work as a solution with the right styling:
https://schwartz-edmisten.com/blog/text-and-image-hover-layout-in-squarespace-71

Or alternatively this plugin might be helpful though does something slightly different:
https://www.ghostplugins.com/products/keito-image-changer

If neither of these works for you, you may want to hire someone to write and implement a coded solution for you.

Hi, @Ziggy, thank you for sharing these tutorials! I found a tutorial and revealed image on hover on the text link successfully. But the position of the image always changes on different page sizes. Is there a way to make it stay in the same position even on different page sizes?

And here is my code:
I added a markdown block and assign class name, and made the title clickable by adding a link.

Quote

<div class="title">test</div>

Design>Custom CSS:

Quote

 

.title {
  text-align:right;
  font-size:22px;
  margin-bottom:30px;
  color:#989A99;
  transition: all .3s ease-in-out;
}

.title:hover {
  color:#595959;
  transition: all .3s ease-in-out;
}

//specify with the class name
.title:hover:before {
  content: '';
  background: url('https://static1.squarespace.com/static/5f6f82c6ee0fb914070f7caa/t/632427a93f5e8239ae11edfb/1663313855439/Website_Cover4.jpg');
  background-size:contain;
  background-repeat:no-repeat;
width: 60vw; 
left: -70vw; 
height: 70vh; 
margin-top: -630px;
position: absolute;
opacity:1;
}