Canvas Support

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

4 replies·opened Aug 4, 2023
C
carabsAug 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.

C
carabsAug 4, 2023

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

S
SemiColonWebSTAFFAug 7, 2023

Hello,

Thanks for your Kind Patience!

This can be easily modified in the sass/shortcodes/_flipcard.scss File. Simply find the:

&:hover & {
	@include transition(transform $flipcard-transition);
}

and

&-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;
}

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:

$flipcard-transition    :          0.7s cubic-bezier(0.4, 0.2, 0.2, 1);

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

<div class="card dark rounded-6 p-5 position-relative bg-transparent border-0 overflow-hidden">
	<img src="your-image.jpg" alt="Image" class="position-absolute top-0 start-0 w-100 h-100 object-cover z-1">
	<div class="card-body z-3">
		<h2 class="mb-3">Hello World</h2>
		<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, perferendis?</p>
	</div>
	<div class="bg-overlay z-2">
		<div class="bg-overlay-bg bg-black op-04"></div>
	</div>
</div>

Hope this Helps!

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

C
carabsAug 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...

<div class="card-body z-3 d-flex align-items-center" style="min-height:270px;">
    <div class="box w-100">
        <h2 class="mb-1" style="line-height: 1.1;">[% item.name %]</h2>
        <a href="[% item.pagename %]" class="button button-large button-circle button-dark button-reveal text-transform-none ls-0"><i class="bi-arrow-right"></i><span>Learn more</span></a>
    </div>
</div>

Thank again.

S
SemiColonWebSTAFFAug 7, 2023

Hello,

Very Happy to Help! :)

You can also consider using this:

<div class="card dark rounded-6 p-5 position-relative bg-transparent border-0 overflow-hidden" style="height: 350px;">
	<img src="images/hero.jpeg" alt="Image" class="position-absolute top-0 start-0 w-100 h-100 object-cover z-1">
	<div class="card-body z-3 text-center d-flex flex-column justify-content-center">
		<h2 class="mb-3">Hello World</h2>
		<p class="mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, perferendis?</p>
	</div>
	<div class="bg-overlay z-2">
		<div class="bg-overlay-bg bg-black op-04"></div>
	</div>
</div>

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