Jump to content

Image in codebox not scaling proportinally

Recommended Posts

Site URL: http://www.aarontmeehan.com

Hey guys, I am using Custom CSS on my site. Basically what I want is a hover-over effect. So I followed this tutorial:


It worked well. Except the problem I have is formatting the size. In the tutorial she has 20vw (view width). I don't want a stationary size, I want the image to match the code binding box. So if I have 3 instances of these code boxes next to each other, they don't scale on top of each other, but stay proportional. Basically I want my image size to react exactly like if I used an image box on my site and had no hover over code. I cannot for the life of me get that to work. What in this code would you replace to do that?

#img-hover { 
  background-image: url('image');


#img-hover:hover {
    background-image: url('image');


Screen Shot 2021-07-20 at 1.40.15 PM.png

Screen Shot 2021-07-20 at 1.39.58 PM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

The hover effect I'm talking about is simply one photo changing into another photo when the mouse is over it. That part I have working using the code above. And she describes how to do it in that youtube video. 

The problem I'm having is the sizing of the photos when using a code box. How does one control the size of the image in a Custom CSS box/block, and have it a scale similar to if were standard image box/block. The images scale with the browser window, but don't stay aligned with the blue code box. When you make the browser window larger, the images get larger and overlap each other. Whereas if you look at the first screenshot below I am using basic image blocks. And they stay aligned with each other, equally distanced apart.  No matter how large the browser window, the images will never grow large enough to overlap, they stay in their block. Thats what I want the images in the code box to do. In the second screenshot, I'm using a code box. Notice how the image isn't bounded to the box.  

Screen Shot 2021-07-21 at 11.12.06 PM.png

Screen Shot 2021-07-21 at 11.14.37 PM.png

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.