Jump to content

Image reveal on hover of text link

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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;
}

 

 

Link to comment

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.