Archived topic
White area at bottom of container on hover
3 replies · Started by David on April 7, 2022
Hi everyone,
I'm working on a new container to replace an existing one for a client.
Link below!
The first of 6 containers has an image with a caption (that I added some CSS to make it black background and white text)
When I add a shadow effect it works ok but there is a white area at the bottom of the container.
I've exhausted by CSS skills trying to find out where it is coming from.
Also 2 other small things:
For some reason I have had to add some CSS to the outer container to make it centred?
.gb-grid-wrapper-9f89f957 {
margin-left: 50px;
}And secondly the hover effect of the shadow is very fast, is there someway to slow it down ?
TIA, Dave
Hi David,
Starting with the whitespace, there is a default margin-bottom on WordPress Image Block captions.
To remove this, you can add this CSS in Appearance > Customize > Additional CSS:
figure.wp-block-image figcaption {
margin-bottom:0;
}With regards to how it’s not centered, it seems that the Grid Columns are not occupying 100% of the width. Try this CSS as opposed to the margin-left you added:
.gb-grid-wrapper-9f89f957 {
justify-content:center;
}With regards to the transitions, let’s try to use the animated class you already have. Try this CSS:
.animated {
transition-property: all;
transition-duration: 0.8s;
transition-timing-function: ease;
transition-delay: 0.5s;
}Kindly change the values to your preference. :)
Please note that animations are also available through GenerateBlocks Pro.
Kindly let us know how it goes.
All perfect, thanks Fernando...
Forgot I had added an animation plugin, I'll switch to the GB Pro
Cheers, Dave
You’re welcome David! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)
