Jump to content

[Share] Hover Image - Show different image

Recommended Posts

Description: Show an image on left >> Show a different image on right

image.png.515fc1077efddf63e8e59068d8dc5421.png

#1. First, add 4 images on the left – and 4 images on the right

image.png.515fc1077efddf63e8e59068d8dc5421.png

#2. Find ID of 4 Image Blocks (left) - 4 Image Blocks (right)

In my example, we will have

Left Images

  • Google: #block-28399af627a27b74cd0d
  • Apple: #block-d0ef4a0ee8c50ebab310
  • Microsoft: #block-2a819a494d3a5475fa01
  • Facebook: #block-17cdd50ddbf9928a5a3b

Right Images

  • Google: #block-yui_3_17_2_1_1709733040692_27646
  • Apple: #block-yui_3_17_2_1_1709733040692_26749
  • Microsoft: #block-yui_3_17_2_1_1709733040692_28531
  • Facebook: #block-yui_3_17_2_1_1709733040692_29322

image.png.455130c0a731a3721e7f166463d08e40.png

#3. Use this code to Code Injection – Footer (or Page Header Code Injection, Page where you use 8 Images)

image.png.b2ab7fe820cd9439674dc59fab528140.png

#4. Explain

image.png.91a738165d6334af5c3cade5888e5409.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 415
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.