Overlay txt on Featured Image Block

Hi @hebhansen!

This can be done by using the “Cover Block” instead of the “Featured Image” block, and choosing the “Use featured image” option. Once you have done this, you can add the “Post Title” block inside the cover block.

I have recorded this vide to show the process.

Please let us know if you encounter any problems doing this.

@mrfoxtalbot

Can I round the corners in Cover block?

Assymetrical Rounder and Theme Gradient overlay

Hi @hebhansen

Can I round the corners in Cover block?

What is shown in the screenshot you shared can be done using a block’s radius.

This setting isn’t available on the cover block at the moment, however, you can achieve this using CSS code.

If you share a link to the page with the cover block, I can check on my end.

• This reply was modified 1 year, 10 months ago by thelmachido a11n.
• This reply was modified 1 year, 10 months ago by thelmachido a11n.

@thelmachido

This is my page

For now I’m using 500px top left corner and 200px bottom right. However that might change ??

Another question related to woo.

My Featured image and soon to be Cover block at top of page displays a product image as featured instead of the global featured image I have set in woo. Can that be fixed and how?

Post title on category pages actually show the title of that same product ??

Product Category Page with a product as featured

• This reply was modified 1 year, 10 months ago by hebhansen.

Hi @hebhansen

For now I’m using 500px top left corner and 200px bottom right. However that might change ??

I see what you mean, you should add the cover block to your page and then will be able to check if it is possible to change the border-radius using CSS.

The CSS can be used to target all the cover blocks on your site or just the ones on your homepage, the decision is up to you.

My Featured image and soon to be Cover block at top of page displays a product image as featured instead of the global featured image I have set in woo. Can that be fixed and how?

I am not sure I am following, are you saying that you want your shop pages i.e product, product category, shop, etc to show the featured image you set in Woo?

How can I css the cover block?

I have now two rows of content on my cover header block.

I want top row to sort of just float to top
and bottom to float relative to bottom of cover.

Is that possible?

Also is it possible through css to ONLY display featured title inside Header and never inside post, page, product, product grid?

I applied this css to Cover block with no effect…

/******** Cover Block Header *******/
.cover-block-style {
border-radius: 500px 0px 200px 0px;
}

I am also using Cover Block as background for a query block…

I am trying to zoom the image on mouse over. But that zooms image and txt. I just want background zoom and then crop image to container…. Code for now:

/******** Ease in and Out *******/
.wp-block-cover__background img.zoom-mouse-over {
  transition: transform .6s; /* Animation */
  margin: auto;
}

.wp-block-cover__background img.zoom-mouse-over:hover {
	transform: scale(1.1); /* (X% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	object-fit: cover;
}

Zoom works but also for txt. I tried adding img identifier. Same result and I tried adding the background class also. Same result. Can this be fixed?

Hi @hebhansen

Is it a bit difficult to follow everything, I would suggest we go through your request from one stage to another.

How can I css the cover block?

You can use the CSS class below to add a border radius to the cover block. If you want the code to target only certain cover blocks, you have to use CSS classes.

.wp-block-cover__image-background
{
border-radius: 500px 0px 200px 0px;
}

I want top row to sort of just float to top and bottom to float relative to bottom of cover.

Which content do you want to float to the top exactly, the site logo and menu?

• This reply was modified 1 year, 10 months ago by thelmachido a11n.

@thelmachido

Thx Thelma reg css above. I will test later today. I am not sure if I should start new thread about this, but since everything relates to adding Cover Block to the Header, I am gonna keep it together here….

Lazy Load of Cover Block…. GtMetrix gave me a notification, since the image loads above-the-fold content. Screen

Link to Learn More

I guess a setting in the CB for Lazy Load off is a good option…

@thelmachido

CSS works but styles all cover blocks. I added a class to Hero, but it does not do anything….

/******** Styles Hero Cover Block *******/		
.wp-block-cover__image-background .hero-cover-block {
border-radius: 500px 0px 200px 0px;
}

I am not a super coder, but I would expect this to work….

Hi @hebhansen

My apologies for the late response. I created a CSS class for the border-radius called special-radius. The CSS code for the class is shown below you can add it to your Customiser.

.special-radius .wp-block-cover__image-background 
{
border-radius: 500px 0px 200px 0px;
}

Once that is done, navigate to Appearance > Editor, and kindly pick the template with the cover block you are working on. You can add special-radiusas an additional CSS class to your cover block as shown in the video below:

https://d.pr/v/U3bpDx

Lazy Load of Cover Block…. GtMetrix gave me a notification, since the image loads above-the-fold content. Screen

Automated site performance tools give general recommendations to improvise site speed. They are useful in identifying some best practices and opportunities for increased speed, you can follow those recommendations.

However, please be advised that there are a number of things that contribute to site speed.