[Resolved] Post box design

[Ying]

Hey last question, If I delete the old GP block my old design all will be messed up?

No, the data are stored in your database, once the new version installed and activated, the design will be restored.

[iamarghya]

Ok ok now bye, thanks again 🤗

[Ying]

No problem 🙂 Sleep tight!

[iamarghya]

Hey, how to structure this? design when adding query loop there are 3 options, that I need to choose it will be helpful if you can give a quick screen record… There are 2 containers in the grid, I only have one 😐

[Fernando]

Hello there,

Here is a short screen recording I made as a sample: https://share.getcloudapp.com/WnuygQWq

Hope this helps you start things off. 🙂

[iamarghya]

I have made the design see but I have to first take a container or it is going in full width not contained,
Now, what to do? for the hover effect?

[iamarghya]

Ummm Hello is anyone there?😅

[Fernando]

To achieve as such, you would need a setup as such:

See: https://share.getcloudapp.com/o0uRnboJ

Also see: https://share.getcloudapp.com/YEurnqgx

Also see: https://share.getcloudapp.com/NQuNQLRO

Also see: https://share.getcloudapp.com/X6uEwqkl

As can be seen, there is a custom class my-absolute-content added to the Container Block of the content, and my-parent-container to the Parent Container.

Then, add a CSS like this in Appearance > Customize > Additional CSS:

.gb-container.my-absolute-content {
    position:absolute;
    bottom:-240px;
    width:100%;
    height:100%;
    transition: all 0.5s ease-in
}

.gb-container.my-parent-container {
    position:relative;
    overflow:hidden;
}

.gb-container.my-absolute-content:hover {
    bottom:0;
}

You’ll need to tweak -240px for instance and the 40px in the image attached on top depending on your design.

Here it is working on my end: https://share.getcloudapp.com/L1uR1nPw

Hope this helps! 🙂

[iamarghya]

Yep I got it worked but see there are some border-radius and image height problem

[Fernando]

Kindly set the borders in the Parent Container. 🙂

[iamarghya]

Yep Done

[iamarghya]

I want the image in full size cover then headline…

[Fernando]

Kindly try increasing the bottom padding of the Parent Container Block. 🙂

[iamarghya]

But then what to do with the icon?
See in the link I have sent u earlier

[Fernando]

Kindly add a Buttons Block and modify the Button Block to have an icon without a text. Then, enabled Dynamic Data and set the link type to single post.

Ex: https://share.getcloudapp.com/z8uLeDoN

Then, modify the button to your preference.

Hope this clarifies. 🙂

[Author]

Posts