Jump to content

Footer image block on hover, flex display problem

Go to solution Solved by tuanphan,

Recommended Posts

Hello There,

Password: not ready yet

I have a little issue with the following css code, whereas it does what I am expecting, however the image on hover does not keep the proper proportions if the browser window is resized (not full screen). Is there a way to have the hover image link to response the same way as the original block-image in term of sizing? Thanks


This is what I have now:


/* Replace ".sqs-block-image" with the class name of your image block */


/* Change the background image of the image block on hover */


   .sqs-block-image:hover img {

     visibility: hidden;


.sqs-block-image:hover {

    background-image: url('https://static1.squarespace.com/static/63bc9e4937adc93be7a356ee/t/6414a42fd8042c6b870d5c87/1679074351492/bowes+logo+web.png');

  background-size: 56px;

  background-repeat: no-repeat;

  background-position: center center;




Link to comment
  • Replies 2
  • Views 231
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution


What is site url?

You can also try this code

/* Change the background image of the image block on hover */
.sqs-block-image:hover img {
    content: url('https://static1.squarespace.com/static/63bc9e4937adc93be7a356ee/t/6414a42fd8042c6b870d5c87/1679074351492/bowes+logo+web.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

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.