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
If you share a link to the site and ideally also some screenshots showing your current setup, we can have a look
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 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. 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.