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

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

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 1

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

It's been a while but if you're still out there would this code be injected in a code block, the page header code injection, or site custom CSS? Thanks!

Share this post


Link to post
  • 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!!

Share this post


Link to post
  • 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!!

Share this post


Link to post
  • 0

did you ever get this working?

I tried the HTML mandeep posted, in a "Code" block, but it doesn't work...

Share this post


Link to post
  • 0

Hi, this works great. whats the easiest way to add a click-through link.Basically, I want it to change the image on hover and when someone clicks it goes to another page

Share this post


Link to post
  • 0

Hi, this works great. whats the easiest way to add a click-through link.Basically, I want it to change the image on hover and when someone clicks it goes to another page

Share this post


Link to post
  • 0

Hi All,

This worked for me to some extent. I get the change of image on the rollover, but can't get it to switch back to the original. I've checked syntax a hundred times and everything is there. Any thoughts?

Thanks!

Mia

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...