H1 tag with dynamic text and image for both referencing

I have found many articles about it but I still can not find a clear answer. I have read many texts that the H1 tag must have a description and we can not use it with img like logo. However, in many projects, I have trouble using H1 at the top of the home page or a single page because of the concept of structure.

Other pages use many different solutions, such as:

www.smashingmagazine.com/articles/

use a lot of H1 tags on the acronym page

widzialni.org

use H1 which are placed immediately after the header and which are hidden (do not display: none)

After all I wonder about the solution as below:

[page description] [short name]

and css:

h1, a {
display: inline-block;
hidden overflow;
position: relative;
}
span {
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
white space: now;
}

The website is based on WordPress. Therefore, I want to use this option on the homepage, pages and categories (the description will be dynamic and not static), while on single-publication pages I want to remove H1 and the contents of the logo and use H1 with the title of the article in the content area. .

Is it a good idea or a bad idea (especially for SEO)?