Canvas Support

Disable Flip Card Animation, Or maybe just a nicer Card solution

4 replies · opened Aug 4, 2023

CcarabsAug 4, 2023

Hello,

I love the look of the Flip Cards, but I don't always want it to flip.

I have played with the classes a bit to see if just removing .flip-card-* would work and it does not.

And I have not seen just a regular card with this darker image background and text overlay.

Did I miss a simple solution?

Thank you in advance.

CcarabsAug 4, 2023

Also, how do you control those Flip Card? When I do want to flip card, I would like some to be shorter.

SSemicolon WebSTAFFAug 7, 2023

Hello,

Thanks for your Kind Patience!

This can be easily modified in the sass/shortcodes/_flipcard.scss File. Simply find the:
[ch_pre type="scss"]&:hover & {
@include transition(transform $flipcard-transition);
}[/ch_pre]

and

[ch_pre type="scss"]&-front,
&:hover &-back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

&:hover &-front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}[/ch_pre]

and change the &:hover with .flip-card-reverse Class. This will Flip the Flip Card only when it has the .flip-card-reverse Class which you can consider adding via JS Events like click.

You can find the Flip-Card CSS Transition Values in the sass/_variable.scss File:
[ch_pre type="scss"]$flipcard-transition : 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);[/ch_pre]

There is also a super simple way to add Static Cards:
[ch_pre]

attachment

	Hello World

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, perferendis?

[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

CcarabsAug 7, 2023

This is great info! Thank you.

Might want to add the card example to your Lists/Cards page - https://canvastemplate.com/lists-cards.html

I gave my card min-height:270px; to fit a little nicer...

<div class="card-body z-3" style="min-height:270px;">
...

I wanted to center the text in the card-body into the center (vertically), so I added d-flex and align-items-center to card-body, and added a new div inside. Seemed to work well...


    
        [% item.name %]
        [Learn more]([% item.pagename %])

Thank again.

SSemicolon WebSTAFFAug 7, 2023

Hello,

Very Happy to Help! :)

You can also consider using this:
[ch_pre]

attachment

	Hello World

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, perferendis?

[/ch_pre]

We will definitely add these examples in the Next Update. Thanks for the Suggestions.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard