Topic: How to create this effect with GP and/or GB?

Nico47
October 14, 2023 at 4:13 am

How can we create the same animation effect as displayed on this page on my book covers using GP and/or GBlocks?

Fernando advised me to create a dedicated topic on this effect so that you can provide custom code.

Thank you
Ying
October 14, 2023 at 11:57 am
Hi there,

A customized effect like this is not included in our support scope, however, we’ll try to point you in the right direction 🙂

Can you create a structure like this?
```
- container
 -- image (cover image)
 -- headline (read the book)
```
Add additional CSS for the 3 blocks:
container: cover-container
image: cover-image
headline: read-book

https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Once it’s done, we can take another look at the effect.
Nico47
October 15, 2023 at 4:21 am

Hello @ying

Done!
Check the link in the PI field info.
Fernando
October 15, 2023 at 7:19 pm

Hi Nico,

Do you have a plugin disabling right-clicking on your site? I’m not able to right-click currently on your site to do some tests. Can you disable that functionality temporarily?
Nico47
October 22, 2023 at 2:11 am

@ying, I did what you asked. What’s next please?

@fernando, yes, I don’t want people to steal my content – lol.
It has been deactivated based on your request.

Fernando

October 22, 2023 at 3:58 am

Can you try adding this through Appearance > Customize > Additional CSS to test?:

.gb-container.gb-container-56bf13b2 figure.gb-block-image.gb-block-image-089466fb::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 107.5%;
    bottom: 3px;
    width: 60px;
    background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

.gb-container.gb-container-56bf13b2 {
    width: fit-content;
    webkit-perspective: 1200px;
    perspective: 1200px;
}

.gb-container.gb-container-56bf13b2 figure.gb-block-image.gb-block-image-089466fb {
    transition: all 0.3s ease;
}

.gb-container.gb-container-56bf13b2:hover figure.gb-block-image.gb-block-image-089466fb {
    -webkit-transform: rotateY(-35deg);
    transform: rotateY(-35px);
    position: relative;
}

.gb-container.gb-container-56bf13b2:hover figure.gb-block-image.gb-block-image-089466fb::after{
    opacity: 1;
}
.gb-container.gb-container-56bf13b2 figure.gb-block-image.gb-block-image-089466fb::after {
    opacity: 0;
    webkit-perspective: 1200px;
    perspective: 1200px;
}

.gb-container.gb-container-56bf13b2 figure.gb-block-image.gb-block-image-089466fb img{
    height: 500px;
    width: auto;
}

Nico47
October 23, 2023 at 7:57 am

Fernando, thanks a lot.
I actually added the code snippet to my Child Theme.

The animation seems to work on the test page.
Should I just shut up and have you keep guiding me, or is it better for me to ask question now?

Let me share the questions I have but maybe they make no sense for you already know that:
1 – How to add the vertical lines that create and emulate the thickness effect of the pages?
2 – How to add the READ THE BOOK ribbon.
3 – Then, the white rectangle with price?

Then:
4 – How can decide when this effect is enabled or not on an image?
5 – Do I need to take care of the size of the image in a specific way or will it work whatever the size and proportions of the image, including the “page thickness effect described in 1 -“?

Last but not least, can I freely test and activate and deactivate any Theme templates of the GP Site Library: Will it not break the effect above?

Thanks again

Ying

October 23, 2023 at 11:30 am

Add this CSS, you might need to adjust the values if the image is not the same size.

.gb-container.gb-container-56bf13b2:after {
    content: '';
    position: absolute;
    top: -20px;
    left: 94%;
    bottom: -18px;
    width: 75px;
    background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
    transform-origin: 0% 50%;
    transform: rotateY(42deg);
    opacity:0;
    z-index: 0;
}
.gb-container.gb-container-56bf13b2:hover:after {
    opacity:1;
    transition:all 0.3s ease;

}

h2.gb-headline.gb-headline-a16d4821.gb-headline-text {
    position: absolute;
    right: -12px;
    top: 40%;
    background-color: #faab9f;
    padding: 15px;
    z-index: 1;
    transition:all 0.1s ease;
}
h2.gb-headline.gb-headline-a16d4821.gb-headline-text:after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 0;
    border-color: #d38d45 transparent transparent transparent;
}

.gb-container.gb-container-56bf13b2:hover >h2.gb-headline {
    transform: translatex(-18px);
}

And select the container block, set its position to relative in the layout panel.

Nico47
October 28, 2023 at 9:57 am

Hello,

I created a new page (links shared in PI field).
How can I get that same effect we worked on above to be applied on any image I like, on any page I liked, and even on 3 different images on a same page?

Thank you
Ying
October 28, 2023 at 11:07 am

Once you have done what I asked here, we can modify the CSS to match the classes:
https://generate.support/topic/how-to-create-this-effect-with-gp-and-or-gb/#post-57926
Nico47
October 29, 2023 at 4:46 am

I’m sorry, but I’m confused with your reply.
What do you mean by:

Once you have done what I asked here,

As said on the conversation, I did it and confirmed it worked. Please see again the link for test page that has always been shared on the PI field info.

Please let me know if there is something I forgot to do before you can answer my question:

How can I get that same effect we worked on above to be applied on any image I like, on any page I liked, and even on 3 different images on a same page?
Ying
October 29, 2023 at 7:06 pm

Please check my reply here:
https://generate.support/topic/how-to-create-this-effect-with-gp-and-or-gb/#post-53641

I don’t see these steps being done:

Add additional CSS for the 3 blocks:
container: cover-container
image: cover-image
headline: read-book
Nico47
October 30, 2023 at 4:10 am

Ying,

I think I forgot to add the additional CDD for all of the 3 blocks, now I get it. Sorry, I’m very new to all this.
It should be done by now.

What’s the next step then?

Thanks again,

Ying

October 30, 2023 at 8:43 am

Here’s the CSS, however on your test page, the parent container has too many paddings, so it won’t fit the image in nicely. you will need to reduce the left and right paddings.

.gb-container.cover-container:after {
    content: '';
    position: absolute;
    top: -26px;
    left: 94%;
    bottom: -18px;
    width: 75px;
    background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
    transform-origin: 0% 50%;
    transform: rotateY(42deg);
    opacity:0;
    z-index: 0;
    max-height: 542px;
}
.gb-container.cover-container:hover:after {
    opacity:1;
    transition:all 0.3s ease;

}

h2.gb-headline.read-book.gb-headline-text {
    position: absolute;
    right: -12px;
    top: 40%;
    background-color: #faab9f;
    padding: 15px;
    z-index: 1;
    transition:all 0.1s ease;
}
h2.gb-headline.read-book.gb-headline-text:after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 0;
    border-color: #d38d45 transparent transparent transparent;
}

.gb-container.cover-container:hover >h2.gb-headline.read-book {
    transform: translatex(-18px);
}

.gb-container.cover-container figure.gb-block-image:has(.cover-image)::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 107.5%;
    bottom: 3px;
    width: 60px;
    background: repeating-linear-gradient(to right, #f5f5f5, #f5f5f5 5px, #aaa 5px, #aaa 6px);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

.gb-container.cover-container {
    width: 100%;
    webkit-perspective: 1200px;
    perspective: 1200px;
    position:relative;
}

.gb-container.cover-container figure.gb-block-image:has(.cover-image) {
    transition: all 0.3s ease;
}

.gb-container.cover-container:hover figure.gb-block-image:has(.cover-image) {
    -webkit-transform: rotateY(-35deg);
    transform: rotateY(-35px);
    position: relative;
}

.gb-container.cover-container:hover figure.gb-block-image:has(.cover-image)::after{
    opacity: 1;
}
.gb-container.cover-container figure.gb-block-image:has(.cover-image)::after {
    opacity: 0;
    webkit-perspective: 1200px;
    perspective: 1200px;
}

Nico47
October 30, 2023 at 2:24 pm

Hi Ying,

I replaced the very first CSS you shared with latest.
See the result on my actual draft page and especially the issue at the bottom of the book.
Nico47
October 30, 2023 at 3:55 pm

Ying,

Please have a look at my DRAFT page (link in PI field info).

I have those issues:

1. This time, the pages of the books that are simulated in the effect are too short, that is, shorter than the height of the book.

2. The emulated pages of the book also appears on the paragraph close to the butterfly.

Viewing 16 posts - 1 through 16 (of 57 total)

1 2 3 4 →

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

How to create this effect with GP and/or GB?