Viewing 10 replies - 1 through 10 (of 10 total)
  • hannah

    (@hannahritner)

    Hi Jory,
    Thanks for posting! I’ll pass this on to the dev team.

    All the best,
    Hannah

    Thread Starter Jory Hogeveen

    (@keraweb)

    Hi @hannahritner

    Great, thank you!
    I’ll close the issue here, do you want me to create a GitHub issue?

    Cheers, Jory

    hannah

    (@hannahritner)

    Hi Jory,
    Our team wasn’t able to replicate this. Which animation are you referring to? The hover overlay still works even after adding an overlay link. See here: https://share.getcloudapp.com/2Nu6jBZ2
    Or if using image as background overlay: https://share.getcloudapp.com/YEuDyA2G
    Thanks in advance for any additional information you can add!

    Kindly,
    Hannah

    Thread Starter Jory Hogeveen

    (@keraweb)

    Hi @hannahritner

    Then I don’t understand what I’m doing wrong.
    I can even reproduce it when in troubleshooting mode with only Kadence active on the default WP theme.
    The Row Layout doesn’t sit in another block so that also cannot be the issue.

    I do have a header within the section (WP default header block) but even removing this block doesn’t solve the issue.

    Here is the block code from the post_content field:

    <!-- wp:kadence/rowlayout {"uniqueID":"_c0a476-21","columns":1,"colLayout":"equal","topPadding":0,"bottomPadding":0,"overlayFirstOpacity":1,"bottomSep":"","tabletPadding":["","","",""],"tabletBackground":[{"enable":false,"bgColor":"","bgImg":"","bgImgID":"","bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat","forceOverDesk":false}],"tabletOverlay":[{"enable":false,"currentOverlayTab":"normal","overlay":"","overlaySecond":"#00B5E2","overlayGradLoc":0,"overlayGradLocSecond":100,"overlayGradType":"linear","overlayGradAngle":180,"overlayBgImg":"","overlayBgImgID":"","overlayBgImgSize":"cover","overlayBgImgPosition":"center center","overlayBgImgAttachment":"scroll","overlayBgImgRepeat":"no-repeat","overlayOpacity":30,"overlayBlendMod":"none"}],"mobileBackground":[{"enable":false,"bgColor":"","bgImg":"","bgImgID":"","bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat","forceOverDesk":false}],"mobileOverlay":[{"enable":false,"currentOverlayTab":"normal","overlay":"","overlaySecond":"#00B5E2","overlayGradLoc":0,"overlayGradLocSecond":100,"overlayGradType":"linear","overlayGradAngle":180,"overlayBgImg":"","overlayBgImgID":"","overlayBgImgSize":"cover","overlayBgImgPosition":"center center","overlayBgImgAttachment":"scroll","overlayBgImgRepeat":"no-repeat","overlayOpacity":30,"overlayBlendMod":"none"}],"columnsInnerHeight":true,"backgroundSlider":[{"bgColor":"","bgImg":"","bgImgID":""}],"backgroundSliderSettings":[{"arrowStyle":"none","dotStyle":"dark","autoPlay":true,"speed":7000,"fade":true,"tranSpeed":400}],"backgroundVideo":[{"youTube":"","local":"","localID":"","vimeo":"","ratio":"16/9","btns":false,"loop":true,"mute":true}],"zIndex":1,"inheritMaxWidth":true,"borderWidth":["","","",""],"tabletBorderWidth":["","","",""],"mobileBorderWidth":["","","",""],"borderRadius":["","","",""],"tabletBorderRadius":["","","",""],"mobileBorderRadius":["","","",""],"responsiveMaxWidth":["",""],"kadenceBlockCSS":"selector {\n  width: 100%;\n  position: relative;\n}"} -->
    
    <!-- wp:kadence/column {"background":"#28C5E8","uniqueID":"_3d4f02-de","textAlign":[null,"",""],"direction":["horizontal","",""],"justifyContent":["center","",""],"gutter":[0,"",""],"verticalAlignment":"bottom","kadenceBlockCSS":"selector {\n position: absolute;\n width: 100% !important;\n bottom: 0;\n}"} -->
    <!-- wp:paragraph {"align":"center","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->

    Let op: Door drukte kan de bezorging langer duren. Bekijk je track &amp; trace voor de laatste informatie over je bestelling.

    <!-- /wp:paragraph -->
    <!-- /wp:kadence/column -->
    <!-- /wp:kadence/rowlayout -->

    Cheers, Jory

    Hey,

    Looks like you are using custom css in the row and section block which is breaking things. I can’t use what you posted to drop into Gutenberg because it appears markup is missing. But I suggest you start by removing your custom css.

    You can always post a link to your site where you have this and we would be able to determine a lot.

    Ben

    Thread Starter Jory Hogeveen

    (@keraweb)

    Hi @britner

    I’m sorry, not sure why but it pasted other stuff in that code block.
    I do not use any custom CSS within this row so that shouldn’t be an issue.
    See the code block below for a new and corrected version.

    <!-- wp:kadence/rowlayout {"uniqueID":"_a9bdc1-7b","collapseGutter":"none","columnGutter":"none","colLayout":"equal","topPadding":0,"bottomPadding":0,"leftPadding":0,"rightPadding":0,"align":"full","columnsInnerHeight":true} -->
    
    <!-- wp:kadence/column {"topPadding":5,"bottomPadding":5,"leftPadding":5,"rightPadding":5,"leftPaddingM":2,"rightPaddingM":2,"uniqueID":"_39f18b-c8","backgroundImg":[{"bgImg":"https://molenaarmeubelen.keraweb.nl/wp-content/uploads/2022/07/plantenstandaard-MB006.jpg","bgImgID":137278,"bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["right","","center"],"leftPaddingT":3,"rightPaddingT":3,"paddingType":"rem","verticalAlignment":"middle","overlayOpacity":0.5,"overlay":"#1B1E26","overlayHoverOpacity":0,"link":"https://molenaarmeubelen.keraweb.nl/product-categorie/woonaccessoires","height":[30,"",""],"heightUnit":"vh"} --> <!-- /wp:kadence/column --> <!-- wp:kadence/column {"id":2,"topPadding":5,"bottomPadding":5,"leftPadding":5,"rightPadding":5,"leftPaddingM":2,"rightPaddingM":2,"uniqueID":"_aca9cb-6a","backgroundImg":[{"bgImg":"https://molenaarmeubelen.keraweb.nl/wp-content/uploads/2022/02/Hoekbank-Liberty.jpg","bgImgID":132635,"bgImgSize":"cover","bgImgPosition":"center center","bgImgAttachment":"scroll","bgImgRepeat":"no-repeat"}],"textAlign":["","left","center"],"leftPaddingT":3,"rightPaddingT":3,"paddingType":"rem","verticalAlignment":"middle","overlayOpacity":0.5,"overlay":"#1B1E26","overlayHoverOpacity":0,"link":"https://molenaarmeubelen.keraweb.nl/product-categorie/banken","height":[20,"",""],"heightUnit":"vw"} --> <!-- /wp:kadence/column -->
    <!-- /wp:kadence/rowlayout -->

    I’m sure you can use this!

    Cheers, Jory

    Thread Starter Jory Hogeveen

    (@keraweb)

    Hi @britner

    I think I’ve just might have found the cause.

    In the parent row layout settings there is an option under “Structure Settings” to set the inner column height to 100%.
    If I enable this option the hover animation stops working.

    EDIT:
    Nevermind. Even though it fixes the animation within the editor, the frontend still isn’t working.
    In the editor the overlay was simply gone (probably due to the inner height)
    On the front-end the overlay is always there but the hover isn’t working.
    I checked again and the hover CSS isn’t generated at all. See initial issue post for reference.

    Cheers, Jory

    • This reply was modified 1 year, 11 months ago by Jory Hogeveen.

    Hi, Thanks for your follow-up. The code you are pasting above is not valid, it’s missing markup, so I can’t do any testing with it. I’m not sure where you are getting it from. You should be able to select the row and copy the entire block right from within the editor; the toolbar button at the top provides the three dots on the right with a dropdown showing the copy option.

    I tested using the full-height option and that didn’t change anything for me. It’s still working. Any chance you can get me the full copy of your block so I can test it?

    Thanks!

    Thread Starter Jory Hogeveen

    (@keraweb)

    Hi @britner

    As far as I know this is the full block, I don’t know what else to share about this block.
    It’s directly copied from the database so if you paste it into the post_content column within the database it should render the block exactly as I have it here locally.

    Please let me know what else I can do here!

    Cheers, Jory

    Hey, I’m sorry it looks like I missed your response!

    If this was copied from your database then it likely means when you pasted it here the markup was striped. It’s missing divs for example around the row and columns. Best if you can post a link to a gist so that it’s not getting striped of anything from the WordPress forms.

    Ben

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Section background overlay hover animation’ is closed to new replies.