I would like to change the image size that comes up when I hover over a page link on my home screen, Hawley template

Site URL: https://www.wij.design/

Hello!

So I use Squarespace to host my portfolio.

My home screen has a list of past projects. 

The hawley template allows me to choose an image that fills the screen when I hover over the project page link.

I've been resizing the image, in my image (if that makes sense). The image I'm uploading to Squarespace is a mostly white background, with my project image resized and placed in the part of the screen I want it to pop up on. 

Is there any way for me to edit the size and placement of this image, so that I don't have to format each image in the way mentioned above? So that when I upload the image to Squarespace I want used, it shows up as 500x281 at a specified location.

All help is very much appreciated, thank you!

On 3/17/2021 at 5:47 PM, Wijdesign said:

Site URL: https://www.wij.design/

Hello!

 

So I use Squarespace to host my portfolio.

My home screen has a list of past projects. 

The hawley template allows me to choose an image that fills the screen when I hover over the project page link.

I've been resizing the image, in my image (if that makes sense). The image I'm uploading to Squarespace is a mostly white background, with my project image resized and placed in the part of the screen I want it to pop up on. 

Is there any way for me to edit the size and placement of this image, so that I don't have to format each image in the way mentioned above? So that when I upload the image to Squarespace I want used, it shows up as 500x281 at a specified location.

All help is very much appreciated, thank you!

 

So you looking for solution to upload images with its original dimension instead of big blank image with your content in middle right?

On 3/20/2021 at 6:46 AM, bangank36 said:

So you looking for solution to upload images with its original dimension instead of big blank image with your content in middle right?

yeah! pretty much!

Not necessarily original dimensions, just smaller and in a specific place on screen.

It would be most convenient if I could upload an image at any size, and Squarespace would resize it to fit the specified dimensions.

But, I'm more than happy to resize all the home screen images. as long as they all appear in the same place on screen.

1 hour ago, Wijdesign said:

yeah! pretty much!

Not necessarily original dimensions, just smaller and in a specific place on screen.

It would be most convenient if I could upload an image at any size, and Squarespace would resize it to fit the specified dimensions.

But, I'm more than happy to resize all the home screen images. as long as they all appear in the same place on screen.

All images are on the same place?

On 3/22/2021 at 11:57 PM, bangank36 said:

All images are on the same place?

yep!

So you can see on my website now, that when you hover over the projects, the image changes, but stays in the same place each time. 

On 3/22/2021 at 11:57 PM, bangank36 said:

All images are on the same place?

I think I've got it to work! 

Posting here incase anyone else wants to do the same. 

.portfolio-hover-bg-img{
 background-image: url("INSERT IMAGE URL HERE");
position: absolute;
top: 35px;
left: 400px;
width: 500px;
height: 281px;
}

If you want to do the same, just copy and paste this and replace "INSERT IMAGE URL HERE" with your url, and play around with the spacing by increasing or decreasing the pixel count.