Cannot Get Hover Effect On Column

When I create a hover effect on a column, it will not show up. Not sure what I am doing wrong, I have tried everything I can think of :confused:

If you share a link to the site and ideally also some screenshots showing your current setup, we can have a look :wink:

Also better to bump your previous question with additional info so it’s easier for people to help. Posting the link for reference of the effect you’re after Creating Hover Effect On Column

Hi Martin, thank you so much!! I can’t really provide the site :frowning: I know that sounds weird and is difficult to get help; but I can’t provide it because I’m being tasked with learning bricks for the new site, and I’m not sure if the owner will like that I’m sharing the link.

I can definitely bump my original post. Sorry for double posting, wasn’t really sure what to do and didn’t even think about just bumping it.

Should I just go ahead and delete this post and bump my original one?

This is the website and the exact effect I am looking to do is under the logo section where the testimonials are - Hover Effect over Testimonials.

Also, is it possible to make your links ā€œnofollowā€, or does Bricks forum already do that. Sorry for simple questions, I’m still learning Bricks, after coming from Elementor.

At this point just leave it up I guess haha. As for nofollow links, the link to the page you posted seems to be nofollow.

Now for the hover column thingy… Parts of it are probably doable in a more bricksy way but personally I just get lost adding rules and css all over the place so I usually keep it together where possible. Since everything is supposed to happen on hover of the column, that’s where I’ve put the css.

It’s very basic but hopefully enough to give you a starting point to tweak. Forum won’t let me upload a json file so copy the whole thing below, save it as .json file and import into your site (straight copy paste might work as well but have’t played around enough with that to know).

Also note that I’m working with mobile first breakpoints so no idea how it’s gonna show on your page haha.

{"id":5045,"name":"hover-column","title":"Hover Column","date":"2023-06-14 03:58:09","date_formatted":"June 14, 2023","author":{"name":"Admin","avatar":"https:\/\/secure.gravatar.com\/avatar\/50d0023ec70e458ac967d73c75e9cb70?s=60&d=mm&r=g","url":"https:\/\/wordpress-935317-3561214.cloudwaysapps.com"},"permalink":"https:\/\/wordpress-935317-3561214.cloudwaysapps.com\/template\/hover-column\/","thumbnail":false,"bundles":[],"tags":[],"type":"","content":[{"id":"jmdkzs","name":"block","parent":0,"children":["drkgcs"],"settings":{"_height:mobile_portrait":"300","_background:mobile_portrait":{"image":{"id":370,"filename":"image-30.webp","size":"large","full":"https:\/\/wordpress-935317-3561214.cloudwaysapps.com\/wp-content\/uploads\/image-30.webp","url":"https:\/\/wordpress-935317-3561214.cloudwaysapps.com\/wp-content\/uploads\/image-30-1024x770.webp"}},"_justifyContent:mobile_portrait":"flex-end","_typography:mobile_portrait":{"color":{"hex":"#ffffff"}},"_cssTransition:mobile_portrait":".3s all ease-out","tag":"a","_cssCustom:mobile_portrait":"#brxe-jmdkzs::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(255,255,255,0.7);\n  opacity: 0;\n  transition: .3s all ease-out;\n}\n#brxe-jmdkzs:hover::after {\n  opacity: 1;\n}\n\n#brxe-jmdkzs .hover-card-content {\n transform: translateY(40%);\n transition: .3s all ease-out;\n}\n\n#brxe-jmdkzs .hover-card-hover-content {\n  opacity: 0;\n  transition: .3s all ease-out;\n}\n\n#brxe-jmdkzs:hover .hover-card-content {\n  color: #000;\n}\n\n#brxe-jmdkzs:hover .hover-card-content {\n  transform: translateY(0);\n}\n\n#brxe-jmdkzs:hover .hover-card-hover-content {\n  opacity: 1;\n}","_gradient:mobile_portrait":{"applyTo":"overlay","colors":[{"id":"yhohkr","color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.3)","hsl":"hsla(0, 0%, 0%, 0.3)"}},{"id":"hqocxv","color":{"hex":"#000000"}}]},"_padding:mobile_portrait":{"bottom":"25","top":"25","right":"25","left":"25"}},"label":"Column"},{"id":"drkgcs","name":"div","parent":"jmdkzs","children":["ovyoov","noozfo"],"settings":{"_cssGlobalClasses":["mrktcg"]}},{"id":"ovyoov","name":"heading","parent":"drkgcs","children":[],"settings":{"text":"I remember early days when I was living the dream. But finally getting to the point where it's just like, I can't do this anymore."}},{"id":"noozfo","name":"text","parent":"drkgcs","children":[],"settings":{"text":"OtterBox was Curt\u2019s path to doing the creative work he loved. But as the business grew, his job went from innovating to fighting fires. Creating a vision and a team to implement it restored his dream.","_cssGlobalClasses":["zgngvu"]}}],"templateType":"","global_classes":[{"id":"mrktcg","name":"hover-card-content","settings":{"_position:mobile_portrait":"relative","_zIndex:mobile_portrait":"9","_cssTransition:mobile_portrait":".3s all ease-out"}},{"id":"zgngvu","name":"hover-card-hover-content","settings":[]}]}

Oh cool, thank you!! I was trying to do it more the bricksy way, but definitely finding a lot of css everywhere. :confused: I’m more used to page builders soo… regarding the code in the JSON file, how do import it - just through bricks?? How do I apply it to the page/section I am working on??

As for a more bricksy way, in my opinion, sprinkling custom css here and there is (my) bricks way haha. The way I see it, with other page builders I always felt that adding custom css was more of a way to fight against the builder and override their modules in ways they didn’t account for.

In bricks however, I feel it’s encouraged to add your own stuff, like it’s more of a non opinionated page builder that doesn’t try to force anything onto you.

Never tried but I think you could go into each child element of the column, in the pseudo selector add the .column-class:hover and style the element using the bricks ui. Nothing wrong with that but personally, if I wanna adjust anything I’ll have to keep jumping around all the elements and remember what’s where.

If I add all the css into the columns custom css however, I see everything at a glance and don’t have click around forever to adjust anything.

At the end of the day, whatever floats your boat haha sorry for the long discourse.

As for the template, once you’ve saved it as a json, go either into bricks templates in the backend to import or I think you can import it straight in the builder as well if you go to insert template at the top right.

Maybe someone who’s done something like this without any css chime in on how they did it.