Animation error

Hi there,

could you help me with the following issue:

On this page (https://www.telecats.nl/a-testpaginas/testpagina-grids/) you see that I want to set up 4 columns with buttons instead of image+text, so the whole column is linked to the url instead of only the image and text.
This works fine, however: I also want some animation on hover.

The CSS used (for all 3 examples) is:
#schaduw-bgwit .x-column {
box-shadow: 0px 0px 2.5em -2px rgba(0,0,0,0.15);
background-color:#ffffff;
border-radius:0px;
}
#schaduw-bgwit .x-column:hover {
box-shadow: 0px 0px 2.5em -2px rgba(0,0,0,0.25);
background-color:#ffffff;
transform: scale(1.03)!important;
transition:0.3s ease-in-out,box-shadow 0.3s ease-in-out !important;
}

The fix I’m looking for is:

  • The text gets blurry on hover (first row). This is the row where I used buttons. Why does it get blurry and how do I fix this?
  • Animation on the first and second row do NOT end ease-out, the thirth row does and that’s what I want. The strange thing is that all rows use the same CSS. How can I fix this.

Hope you can help me with it.

PS: on the last release note I read you are planning GRID functionality in X. Does this mean that the use of an plugin like The Grid or Essential grid won’t be necessary anymore?

Kind regards
Victor

Hi Victor,

The text gets blurry on hover (first row). This is the row where I used buttons. Why does it get blurry and how do I fix this?

The text is also scaling. What you are trying to achieve is not possible. Scaling the container in this case the column will also scale the child elements.

You need to somehow separate the text from scaling.

  • Animation on the first and second row do NOT end ease-out, the thirth row does and that’s what I want. The strange thing is that all rows use the same CSS. How can I fix this.

The animation looks the same on my end on all rows. Can you try it on another browser.

On the last release note I read you are planning GRID functionality in X. Does this mean that the use of an plugin like The Grid or Essential grid won’t be necessary anymore?

It still depends on your preference and what features you need. Both of those plugins will still come bundled with the theme.

Thanks

Hi Paul,

Thanks for your reply. I’ll look into the css ink you send.

About the grid functionality:
I used essential grid, but it made my website very slow. Now I use The Grid plugin. Works fine however I can’t get it to act like a flexbox, so I have to set a fixed height for all items and for every screen size. And that’s not how I want to do it.

That’s why I asked my earlier question, so I can create a grid with buttons in (flexbox) columns.

However, if you have any solution on how to get it working in The Grid, I would be very great full. (I can’t get support because I don’t have a registration code because the plugin is delivered with X pro.

Kind regards,
Victor

Hey Victor,

The quickest solution for your case is to use the 2nd section setup. There’s just no ease out because you’ve applied the transition property to the hover. You should apply it to the column like in this screenshot.

Hope that helps.

Thanks a lot, works fine.

(it’s so logical, stupid I didn’t see this)

You’re welcome.

one question:
How do I use support from plugins (The Grid) that are delivered with X pro? I need a purchase-code to summit a ticket?

Hi Victor,

Yes, you will need to buy that plugin separately to be able to post to their support forum.
But since it comes bundled with the theme, we do support it
You may submit your ticket to us regarding that plugin.

Thanks

Oke, here the issue with The Grid. It works fine however I can’t get it to act like a flexbox.

(example page) https://www.telecats.nl/a-testpaginas/testpagina-grids/

I use a masonry grid because the content length is different in the items. However I want every item to be the same height. Flexbox does this automatically but I can’t get it working in The Grid.

  • Force item size and Item Fit Rows are on

​I don’t want to set a fixed height for all items and for every screen size, because there are to many options (screen sizes).
​Do you have a solution ?

Thanks in advance
Kind regards,
Victor

Hi Victor,

Please try adding this custom CSS under Theme Options > CSS:

p.tg-item-excerpt {
    min-height: 200px;
    display: flex !important;
    align-items: center;
}

Hope it helps :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.