Hover revelation
Meule de pain
Farine de meule T80, levain dur Goût prononcé et acide
Bonne conservation
Certifiée BIO
Meule de pain
Farine de meule T80, levain dur Goût prononcé et acide
Bonne conservation
Certifiée BIO
Meule de pain
Farine de meule T80, levain dur
Goût prononcé et acide
Bonne conservation
Certifiée BIO
Three different hovering card revelation
The overlay Change
Meule de pain
Farine de meule T80, levain dur Goût prononcé et acide
Bonne conservation
Certifiée BIO
The Card
Add a column with a custom class of "card"
Add an image to the card background
The hover Image
Add an image to the HOVER card background
The text column
Add a column with an overlay color to the card and a class of "text"
Then add your text
Add this CSS Code to the card
.text {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.card:hover .text {
opacity: 1;
}
The full text Reveal
Meule de pain
Farine de meule T80, levain dur Goût prononcé et acide
Bonne conservation
Certifiée BIO
The Card
Add a column with a custom class of "card"
Add a column inside this card
Add an image to this column background
The hover Image
Add an image to the HOVER card background
The text column
Add another column inside the card below the image column with a class of "text"
Then add a text element inside this column. Play with negative margin to align it with your image.
Add this CSS Code to the card
.text {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.card:hover .text {
opacity: 1;
}
Reveal with Fixed title
Meule de pain
Farine de meule T80, levain dur
Goût prononcé et acide
Bonne conservation
Certifiée BIO
The Card
Add a column with a custom class of "card"
Add a column inside this card with the class of "card" too.
Add an image to this column background
The hover Image
Add an image to the HOVER column background
The text
Add a text element inside the column for your title .
Align the column to TOP
And another text element for the description with a class of "text"
Play with negative margin to align the description with your image.
Add this CSS Code to the card
.text {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.card:hover .text {
opacity: 1;
}
Any ideas or Requests
Thanks
Feel free to contact us.
if you have any Hacks that would be great to add or any ideas you would like to be solved with Brizy cloud, You can write at contact@kent1media.com or use the form to upload images and ideas. Thanks a lot !!!
If you want just to say thank you or help us maintain this page, Feel free to donate whatever you want
Thanks a lot for your help, It's greatly appreciated !!
And feel free to ask for tutorials or tips that you would like to discover on the site