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.