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
  • Views 928
  • Created
  • Last Reply
  • 3 weeks later...
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
  • 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.