Flex equal height issue and hover border question

Hi,

I am trying to create some equally sized boxes in height. I have used flex, but for some reason, the boxes are not appearing the same height.

I have a fiddle here:

I also have another question/issue regarding the hover state. I am trying to have each box have an inner border as shown in the second box. I have the hover working, but it only works when the inner box is hovered on rather than the whole box. I have tried using margin on the item-box div, but i’m not having any luck

Can anyone help with these issues?

Many thanks

Hi there toolman,

try this…

https://jsfiddle.net/Lwzv6o8x/

coothead

1 Like

Hi coothead,

Many thanks for that :slight_smile:

I am still having trouble with adding the border inside the box when on hover. I’ve tried adding some margin and padding, but it’s not adding it inside the box with 15px margin.

Hi there toolman,

try this…

https://jsfiddle.net/q2y9b0t8/

coothead

Hi coothead,

Many thanks :slight_smile:

Sorry, I think I may have explained it wrong. I am trying to get the border inside the box, with the 15px spacing around the edge of the box.

This is what I am trying to achieve, with the left on hover

hover-capture

Hi there toolman,

does this help…

https://jsfiddle.net/kxo26b8p/

coothead

Hi coothead,

Many thanks, that worked :smiley:

I have tweaked it slightly but I am having trouble getting the icon/text/link to appear on top the box on it’s normal visible state without hovering.

Also, I am noticing a slight delay in the hover effects of the outer colour and in the inner colour.

Do you have any suggestion as to why this would be?

Thanks!

EDIT: I managed to fix the issues by setting the background of c-categories .item::before to transparent.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.