Section background overlay hover animation
-
Good day,
The section background overlay hover animation isn’t working when you’ve also set a link on section overlay.
I’ve checked the rendered output and this hover effect isn’t rendered as inline CSS at all.I can see in the code on GitHub that it should render but for some reason is isn’t rendered:
https://github.com/kadencewp/kadence-blocks/blob/master/includes/blocks/class-kadence-blocks-column-block.php#L399-L423This only happens when the overlay link is set.
Cheers, Jory
- This topic was modified 1 year, 11 months ago by Jory Hogeveen.
-
Hi Jory,
Thanks for posting! I’ll pass this on to the dev team.All the best,
HannahGreat, thank you!
I’ll close the issue here, do you want me to create a GitHub issue?Cheers, Jory
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,
HannahThen 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/rowlayout --><!-- 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:kadence/column --><!-- 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 & trace voor de laatste informatie over je bestelling.
<!-- /wp:paragraph -->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
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/rowlayout --><!-- 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 -->I’m sure you can use this!
Cheers, Jory
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!
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 thepost_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
- The topic ‘Section background overlay hover animation’ is closed to new replies.