Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Image hover change


sandradee13

Question

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

21 answers to this question

Recommended Posts

  • 2

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>  


Hi, I'm Mandeep . Nice to meet you! A website developer with five years experience with Squarespace Designer. I specialize in helping busy founders create modern, professionally designed Squarespace websites that represent their brand. Book a Squarespace Expert :- mandhanjal@gmail.com Squarespace website update, website content update, text added, images added, product added. Over the last 5 years, I have developed a wide range of websites using HMTL, CSS, DHTML, PHP, AJAX, JAVASCRIPT and MySQL including sites for start-up companies and small businesses.

Link to comment
  • 2

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
  • 0

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
  • 0

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
  • 0

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
  • 0
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

Link to comment
  • 0
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
  • 0
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.

Link to comment
  • 0
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...