[Support request] Make the table of contents appear above the article image on mouseover.

[francesco]

What should i do to get this effect?

This contents

How should i do to perform this step?

[David]

Hi there,

you can use a Block Element Content Template:

https://docs.generatepress.com/article/block-element-content-template/

[francesco]

personal curiosity, can these Block Element Content Templates slow down a page a lot? so in order to blogging can be harmful?

[francesco]

I think such a thing could help me.
https://generatepress.com/forums/topic/mouseover-blog-efect/

[David]

personal curiosity, can these Block Element Content Templates slow down a page a lot? so in order to blogging can be harmful?

No – they are no different to you creating your own child theme templates to display the content you want.

That method was for just diplaying the Title over the Featured image. There was no Post Meta or Excerpt like your design requirements.

Are you able to use the Block Element ?

[francesco]

yes but it is not clear to me how to make the extract appear above the image.

[David]

If you follow the video in the document , then it shows how to Add a Container Block and incldue the Featured Image as a Background image. Then you can add a GP Dynamic Content block inside that Container to display your Extract

[francesco]

I’ve seen it but haven’t figured out how to make the content appear when the mouse hovers over it

[David]

Don’t worry about making it appear on hover yet.
First thing is to design the layout so you can see the content in the correct place – pretend its being hovered over.

We can the provide some CSS to hide it, and make it appear on hover.

[francesco]

ok, done.
which CSS could I use?

[francesco]

why effects editor dont work?

[David]

Can you share a link to the site ?

[francesco]

yes

https://fehu.it/

[francesco]

from the editor, if I change the effects I can reproduce the desired effect, but this does not happen on the site.

[Ying]

Hi francesco,

Apply the opacity effect to the very outside containerblock instead of the current containerblock.

You can give the dynamic content block an additional CSS class, eg. blog-dynamic-content.
https://wordpress.com/support/adding-additional-css-classes-to-blocks/

Then use the custom selector option in the effect feature, .blog-dynamic-conten.
https://www.screencast.com/t/N8m1ENpmQF6q

[Author]

Posts