Jump to content

Image hover change

Recommended Posts

Hi All,

I am looking to create a team page with the same effect as this page has - https://www.conducthq.com/about-us/. Would like to have one picture change to another when you hover over it. I know squarespace can only do this with custom code. Can anyone help with this or point me in the right direction?

Any help would be greatly appreciated!

Thanks

Sandra

Edited by sandradee13
Initial Revision
Link to comment

yes you can do through code block . use html + css for this.


<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
   .card {
       width: 130px;
       height: 195px;
       background: url("/examples/images/card-back.jpg") no-repeat;
       margin: 50px;
   }
   .card:hover {
       background: url("/examples/images/card-front.jpg") no-repeat;
   }
</style>
</head>
<body>
   <div class="card"></div>
</body>
</html>  


Mandeep Rajasthani

Squarespace Website Designer
Contact me: mandeeprajasthan@gmail.com

Link to comment
  • 4 months later...
  • 2 weeks later...

Awesome - Thanks so much for sharing! Works like a charm. The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? @mandeep

Thanks!!

Link to comment

Awesome - Thanks so much for sharing! Works like a charm. The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? @mandeep

Thanks!!

Link to comment
  • 1 month later...
  • 3 months later...

I've used this code successfully in a Code Block:


<img src="COVER_IMAGE" 
onmouseover="this.src='OTHER_IMAGE'" 
onmouseout="this.src='COVER_IMAGE'">

In order to use this, open Design > Custom CSS > "Manage Custom Files"

  1. Upload your "Cover Image" file (the image you want to display by default).
  2. Click on that image in the file browser
  3. Now in the CSS editor you will see a link that looks something like https://static.squarespace.com/Cover_Image.png
  4. Copy that link and paste it in place of COVER_IMAGE in the code block
  5. Repeat 1-4 with your "Other Image" (the image you want to display while hovering) and paste the link in place of OTHER_IMAGE in the code block

Good luck

Edited by blaek
Initial Revision
Link to comment
  • 2 months later...
  • 4 months later...
  • 6 months later...
  • 3 months later...

Thanks Blaek for this piece of coding!

 

I saw some questions on how to add a click-through link to the image. This answer probably comes a bit too late for you guys ; ) but here it is anyway (maybe it will help somebody else in the future).

 

Just put the following code in front of Blaek's:

<a href="https://www.yoursitename.com/pageyouwanttolinkto">

 

Make sure that after Blaek's code, you close the tag: </a>

 

Link to comment
  • 6 months later...
15 hours ago, Lyndsey_M said:

Thanks for the help! Any idea how to add text over the images that would remain the same as you hover?

 

Can you share link to page where you use effect? We can take a look

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 4/15/2018 at 7:41 PM, broif said:

Awesome - Thanks so much for sharing! Works like a charm. The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? @mandeep

Thanks!!

I'm getting this same problem. Anyone managed to find a fix?

Link to comment
On 11/26/2020 at 5:05 AM, zigzag said:

I'm getting this same problem. Anyone managed to find a fix?

to make image hover change, you can use this guide.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 4/15/2018 at 2:41 PM, broif said:

The only issue that's coming up is when I use this code on multiple blocks on the same page. Even with different url's pasted in - which ever code block is last on my page - every block takes that property. Any idea why? 

Thanks!!

@broif @zigzag I ran into the same issue, but the second suggested code works great for multiple blocks on the same page:

<img src="COVER_IMAGE" 
onmouseover="this.src='OTHER_IMAGE'" 
onmouseout="this.src='COVER_IMAGE'">
Edited by HCow
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.