Jump to content

Image size issue with hover css (code block)

Recommended Posts

Site URL: https://www.kevinfabrizi.com

I am having a mind numbing issue with some simple css. I have a code block with image image swap. It looks great in editor mode but on the live site the first image is expanding outside of the appropriate image block. The roll over image is correct however. Not really sure what the issue is. Any ideas?

www.kevinfabrizi.com

Here is my CSS

.image-swap img:nth-child(1) {
  position: absolute;
  transition: 0s;
}

.image-swap img:nth-child(1):hover {
  position: absolute;
  opacity: 0;
}

Link to comment
  • Replies 10
  • Created
  • Last Reply
  • 3 weeks later...
On 8/16/2020 at 10:08 AM, KaijuCorgi said:

I was having the exact same issue! How did you solve it @fabrizi?

If you share link to page where you use code block. We can take a look

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
15 hours ago, katelouisemoras said:

Hi all, was there a solution to this? I am also having this exact same issue here --> https://www.thisishustle.com/our-community 

It all looks fine in editor mode though. 

I found a solution on the original tutorial I followed. In case anyone has the same problem here is a link - solution in comments. It has to do with padding vs margin. 

 

Link to comment
17 hours ago, sarahjohanna said:

How does the image swap work on a main page where you can't add the code section? 
 

Can you share link to main page? WE can check easier.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...

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.