Hi there,
could someone 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.
Kind regards
Victor