Rollover border effect

Beaver Builder
1

Is it possible to create columns with a hover effect on the borders similar to chrislema.com

I would like to re-create the effect used on the Blog Post columns with the background getting the orange border on hover.

I’m enjoying BB more and more and love the flexibility, so any way to extend this is always welcome?

Any suggestions on how this might be achieved would be much appreciated. I’m a coding idiot so apologies for any dumb questions.

Thanks
Andrew

2

Hey Andrew,

Thanks for getting in touch! While the ability to do what you like isn’t available by default, it is with some custom CSS. To get us started on that, can you share the site URL so we can take a look? You may also want to do a quick search as I swear we provided some CSS snippets for this at some point in the past.

Best,
Billy

3

[Content Hidden]

4

Hey Andrew,

I’d just like to chime in here. I’ve tried accessing your Website but it seems to be locked. Could you probably provide us the password in private reply for us to have a better look at your Website?

Thank you.

5

[Content Hidden]

6

Hey Andrew,

I’m in and your Website looks awesome. Check out the CSS snippets below and insert it into your Theme Custom CSS. Please let me know if it works.


.fl-builder-content .fl-node-56328082c6303 .fl-col-small .fl-col-content,
.fl-builder-content .fl-node-56328bcbbd120 .fl-col-small .fl-col-content{
    border-style: solid;
    border-color: transparent;
    border-width: 5px;
}

.fl-builder-content .fl-node-56328082c6303 .fl-col-small .fl-col-content:hover,
.fl-builder-content .fl-node-56328bcbbd120 .fl-col-small .fl-col-content:hover{
    border-style: solid;
    border-color: #F37022;
    border-width: 5px;
}

Thanks!

7

KC hi

Thanks for the kind words. Was a whole hour of hard work including 45 minutes deciding the colours and fonts. Pretty amazing what BeaverBuilder can do in 15 minutes.

I tried the code you sent but it’s not working. I removed the border from the first box just in case this was obscuring anything but no.

I’m using Dynamik Gen on Genesis which behaves pretty well with BB. The code you sent I added into the custom CSS.

Do I need to add anything to the actual element on the page inside BB?

Thanks for your help.
Andrew

8

Hey Andrew,

Thanks for updating. Sorry to disappoint you. I’ve checked your Website and it looks like the Custom CSS doesn’t seems to take effect. Perhaps you should check if it is inserted correctly.

Thanks!

9

[Content Hidden]

10

Hey Andrew,

Thanks for the screenshot. Do you mind sharing temp admin access so I can check? There seems to be an issue with your Theme Custom CSS.

Thanks!

11

[Content Hidden]

12

[Content Hidden]

13

[Content Hidden]

14

Hey Andrew,

It looks like you have inserted php code into the Custom CSS, that I believe is not correct. I’ve commented it for you, and the Custom CSS seems to be working now.

Thanks!

15

KC

Perfect. Many, many thanks.

Beaver Builder is a great product, matched only by the amazing support from all you guys.

Many thanks once again
Andrew

16

Hey Andrew,

Your welcome. All the best and Enjoy BB!:slight_smile:

Thanks!

17

Thanks KC for you insights…
I’m curious about the fl-node-some-hex-type-number :slight_smile:
Where does that come from and it seems like you have to target a very specific selector here…
Is there a more general way of generating this effect ?
TIA, Dave

18

KC hi again

Yes, thanks for pointing that out. I’de setup the full width page template and made a mistake when I was adding the code.

I have started using Genesis Dambuster as well so that makes full width layouts a snap.

Many thanks once again

Andrew