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;
}

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

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.

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!

Checking right now

Have you managed to fix it?

I see borders also at the bottom

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!