Can see flip card back through flip card front problem.

5 replies · opened Apr 12, 2022

EedsadesignsApr 12, 2022

Hi I seem to having problems with flipcards - If i have an image front side and image backside it works OK but when I have html on the back, I seem to be able to see it through the flip-card front.

Example here (on the LOCATION,LOCATION,LOCATION square):
https://blocktaunton.co.uk/index22

SSemicolon WebSTAFFApr 12, 2022

Hello,

Consider using this code and see if this fixes your issue:

<div class="flip-card text-center grid-inner">
	<div class="flip-card-front" style="background-image: url('img/blocks/location-speech.jpg');">
		<div class="flip-card-inner">
			<img src="img/blocks/location-speech.jpg" alt="Block Taunton" />
		</div>
	</div>
	<div class="flip-card-back bg-black-square no-after">
		<!--<img src="img/blocks/location-text.jpg" alt="Block Taunton" />-->
		<div class="flip-card-inner">
			<p class="mb-2 text-white">BLOCK Workspace Taunton is situated at Bonville House in the thriving Blackbrook Business Park, just off Junction 25 of the M5. This is a prime office location for any Taunton business with parking on site for total commute ease and convenience.

			<form type="post" target="_blank" action="https://goo.gl/maps/jSf6qmKmgmirE6Me8"><button type="submit" class="btn btn-outline-light mt-2">View Map</button></form>
		</div>
	</div>
</div>

Additionally, you can also consider using the following CSS Code:

.flip-card .flip-card-front {
    z-index: 3;
}

.flip-card .flip-card-back {
    z-index: -1;
}

.flip-card:hover .flip-card-front,
.flip-card:hover .flip-card-back {
    z-index: auto;
}

Hope this Helps!

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

EedsadesignsApr 12, 2022

Sorry that didn't work, the block disappears??

SSemicolon WebSTAFFApr 12, 2022

Hello,

Consider using just the CSS Codes provided in the css/custom.css File without changing any HTML Codes.

This should definitely work fine. We have tested this on your Websites. Hope this Helps!

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

EedsadesignsApr 12, 2022

BOOM! Thanks legends =)

SSemicolon WebSTAFFApr 12, 2022

Hello,

Very Happy to Help! :)

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

PS. Great Website! Brilliant Customizations. :)

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
Can see flip card back through flip card front problem. · Canvas Template Support