Jump to content

Border Radius on Background Image GIFs for Portfolio Grid

Recommended Posts

Hey there!

Looking for some help with an issue I'm having. Basically I have a gif as a background image on a portfolio grid. On hover the static foreground grid image fades to opacity 0 to show the gif. I'd like to have a border radius on the portfolio grid, but when using CSS to add a border radius, the foreground static image works great, but the background gif doesn't round the bottom edges as you can see on the site currently.

I assume this might be because how the gif is implemented with "background-size: contain" being used, because when switched to "background-size: cover", the gif is rounded on all sides, but it does not fit the portfolio grid size. Please let me know if anyone has any ideas to fix this, can't figure it out as a newbie. Thank you!

Site: https://sheep-flatworm-y9c8.squarespace.com/
Pass: east

 

Code used for GIFs:

Quote

 

// Portfolio Items GIF Hover 
a.grid-item:hover img { 
  opacity: 0; 
  transition: 0.5s !important
}

.grid-item[href="/home/soothing-barrier"] {
    background-image: url("https://images.squarespace-cdn.com/content/65b002c922195a2184b427d1/60c702e2-0799-4141-8c8e-5be45de6534f/SB_NG2.gif");
    background-repeat: no-repeat;
    background-size: contain;
}

 

 

Code used for border radius:

Quote

// Portfolio Grid - Rounded Corners
a.grid-item, .grid-image {
    border-radius: 15px;
}

 

Edited by xylo
Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I see the border-radius even after I hover over the image.
What browser are you using? 

Screenshot 2024-03-08 at 19.53.34.png

Link to comment
Posted (edited)

Thank you for taking a look! I am using Chrome, and yes the top part of the portfolio is rounded, but not the bottom. It gives the appearance this is intentional when it's not because the background gif is not rounded at the bottom.

This is more noticeable on a project like below where you can clearly see the bottom of the foreground image being rounded, but not the background gif behind.

 

Screenshot 2024-03-08 at 12.58.18.png

Edited by xylo
Link to comment

To add to this... I was experimenting and my code works as intended when putting the Portfolio grid to "Overlay ", with foreground image and background gif both having rounded corners top and bottom. 

It seems that when the portfolio grid is on "Simple", it's including the area below where the title is displayed for the background image container, and rounding the corner there, so it's not seen when using "background-size: contain" to resize the background gif to the thumbnail. I've attached an image to illustrate this by removing "background-size: contain" in the code.  I would still like to use the portfolio grid simple, so would be grateful if anyone knows a workaround!

No background size contain.png

Link to comment

Checking right now

Link to comment

Have you managed to fix it?

I see borders also at the bottom

Screenshot 2024-03-10 at 04.38.11.png

Link to comment
Posted (edited)

Unfortunately, not exactly. It works perfectly when the portfolio layout is set to Overlay, as it is now on the live site. 

When it is set to Simple, and when using "background-size:contain" for the gifs, the bottom of the background gifs do not display the border radius and displays with hard bottom edges. If "background-size:contain" is removed from the code, you will see the background gif with the border radius, but it is doing it in the space where the titles are and doesn't fit into foreground image size.

I've attached a video below of this, with the left project not using "background-size:contain", and the right project using it to show what happens.

 

 

 

I'd still like to use the Simple grid layout, so trying to figure it out. Hope I am it explaining clearly enough. Thanks for the help anyway!

 

Edited by xylo
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.