Padding on columns

[sarammog]

Hi,

Adding padding to my columns is not working as I am using some css to create an overlay effect on hover (which I found elsewhere in this support forum and which was really helpful.

The page is here: http://fentonskitchens.co.uk/home-main/

To explain: the first column of 2 has a .3em white border which I have achieved through padding on the column. I want the same effect on the 3 column images lover down, but if I add padding in the normal way, it doesn’t have any effect, and I thin this is because of the .overlay class I am using in custom css which goes like this:

.overlay {
position: relative;
}

.overlay:before {
content: “”;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(88, 88, 90,2);
opacity: 0;
transition: opacity 0.5s ease;

}

.overlay:hover:before {
opacity: 0.35;
}

I would be really grateful if you could help me achieve the same padding on the columns where I am using the overlay!

Many thanks.

[rad]

Hi there,

Thanks for posting in.

You may go on when adding the padding, but, you should add positioning to your overlay with the same size as the padding. Example,

.overlay:before {
content: "";
display: block;
position: absolute;
top: 0.3em;
left: 0.3em;
right: 0.3em;
bottom: 0.3em;
width: calc(100% - 0.6em);
height: calc(100% - 0.6em);
background-color: rgba(88, 88, 90,2);
opacity: 0;
transition: opacity 0.5s ease;

}
.overlay [class^="x-bg"] {
top: 0.3em;
left: 0.3em;
right: 0.3em;
bottom: 0.3em;
width: calc(100% - 0.6em);
height: calc(100% - 0.6em);
}

The 0.3em is added to all sides, plus, - 0.6em (0.3em x 2) for width and height. Working with backgrounds (different from images) is a bit complex, you may want to consult further enhancement for a developer

Hope this helps.

[sarammog]

Thank you so much! That’s absolutely what I need and with a few tweaks will be perfect. Thanks as always for your excellent and speedy support.

[basanta]

you are most welcome! and thanks for your feedback, it means a lot for us.

Thanks