Column background image hover

[aenahbanana]

Hi There!

I have a grid made of rows and columns. I wanted to add a border when people hover over the images but since my border is scooped and a bit complicated to actually code, I just added a simple background image (a .png file with just the white border). So It’s kind of a cheat. It looks good on desktop but when you try to resize the browser and the boxes adjust sizes, the background image (aka the border) doesn’t stretch and adapt to the size. Is there a way to make it go fully stretched or is there any other way I can add the border on hover?

Thank you!

[friech]

Hi There,

Thank you for writing in, so you added the frame background using the following custom CSS code right?

background: url("http://www.butterlanebakeshop.com/wp-content/uploads/2018/04/scoop.png");
  background-size: 100% 100%;
  background-size: cover;
}

If so, please remove the background-size: cover; property and leave only the background-size: 100% 100%;

And then apply a height: calc(100vw / 4 * 2); property to your images (the frames), by adding this to the image Elements CSS

$el {
    height: calc(100vw / 4 * 2);
}

Cheers!

[aenahbanana]

Hi There!

This worked by stretching the border image but my columns are not square anymore. So I disregarded the height property code and just removed background-size: and resized my columns per breakpoint so they stay square.

Thank you

[friech]

Hi There,

Yeah, that was the first solution I’ve thought of but I’m afraid you might find that tedious, so I did formulate a calculated height instead. Anyways glad you figure things out.

Cheers