Jump to content

Image hover change

Recommended Posts

  • Replies 21
  • Views 23.2k
  • Created
  • Last Reply

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.