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

Hey Ying, your instructions and screenshots were super clean. Understood 100%.

Awsome!! Glad to hear that 🙂

1. Can you link us to the example site again? I’m not sure there’s a dynamic way for the effect.I’ll check the example site one more time.

2.1 Change this CSS:

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

to:

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

2.2 Select the parent container of the cover-container, switch to mobile mode, set width to 70%.

2.3 Remove the width and height attribute set for the cover-container.

3.4 Select the grandparent container of the cover-container, and set overflow-x and overflow-y to visible.

1. The link to the example site was in my VERU first message. Anyway, I copied and pasted it in the PI for you.

Yes, it’s always better to put all links into the private info field, it’s easier for us to check. The topic already has 4 pages, and we’re dealing with hundreds of topics every day, I can not remember where the link is, hope that’s understandable.

And as I stated in my first reply, a customized effect like this is NOT included in our support scope, however, we’ll try to point you in the right direction 🙂 The below CSS should fix the window shrink issue, and get you the exact same effect as the example site.

But we have put too much time into this non-theme-related topic, I’m afraid this will be the end of this topic. If you want to keep on customize the effect, I would recommend hiring a developer for this. Thanks for your understanding!

1. Add parent-cover-container class to the parent container of the cover-contaienr.
2. Try replacing all the CSS regarding this animation to this:

.parent-cover-container {
    webkit-perspective: 1200px;
    perspective: 1200px;
    overflow: visible;
}
.cover-container:after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 70px;
    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);
    opacity: 0;
}
.parent-cover-container:hover .cover-container:after {
    opacity:1;
}
.parent-cover-container:hover h2.gb-headline.read-book {
    transform: rotateY(35deg) translate3d(10px, 0%, 20px);
    right: -2px;
}

h2.gb-headline.read-book.gb-headline-text {
   position: absolute;
   top: 40%;
   right: -15px;
   text-transform: uppercase;
   background-color: #5ed95e;
   color: #fff;
   width: 50%;
   z-index: 1;
   -webkit-transform-origin: 100% 0;
   transform-origin: 100% 0;
   transition: all 0.3s 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: #1ea11e transparent transparent transparent;
}
.parent-cover-container:hover .cover-container {
    -webkit-transform: rotateY(-35deg);
    transform: rotateY(-35deg);
    display: inline-block;
}
.gb-container.cover-container {
    position: relative;
    transform-origin: 35% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.parent-cover-container * {
    transition: all 0.5s ease;
}

I updated the code here:https://generate.support/topic/how-to-create-this-effect-with-gp-and-or-gb/page/4/#post-75989

And make sure you add the parent-cover-container class to the parent container of the cover-contaienr.

Hope you are getting better now!

The site info is gone, can you re-add them to the private info field of your first post on this topic？

Select the h2 headline block, set the font-size on desktop and tablet to 2.5vw, and set it to 28px on mobile.