Flip Boxes

Flip Cards

Flip cards reveal extra content on hover with a 3D flip. The front shows an image or icon; the back slides in with text and an action. By default the card flips horizontally (left/right); add .top-to-bottom to flip vertically.

Structure

• .flip-card - the card wrapper that owns the 3D perspective
• .flip-card-front - the front face (often an image background via inline style)
• .flip-card-back - the back face revealed on hover
• .flip-card-inner - centers the content inside each face
• .top-to-bottom - modifier on .flip-card to flip vertically instead of horizontally
• .no-after - removes the dark overlay layer on a face (use on solid-color backs)

Structure Markup

<div class="flip-card text-center">
	<div class="flip-card-front dark" style="background-image: url('images/featured/1.jpg')">
		<div class="flip-card-inner">
			<div class="card bg-transparent border-0 text-center">
				<div class="card-body text-contrast-900">
					<i class="bi-camera h1 mb-2"></i>
					<h3 class="card-title">Special title treatment</h3>
					<p class="card-text fw-normal">With supporting text below as a natural lead-in to additional content.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="flip-card-back bg-danger no-after">
		<div class="flip-card-inner">
			<p class="mb-2 text-white">Capture every detail with a clean, modern layout built for showcasing your visual work.</p>
			<button type="button" class="btn btn-outline-light mt-2">View Details</button>
		</div>
	</div>
</div>

Variants

Vertical flip: add .top-to-bottom to the .flip-card so it flips over its horizontal axis.

<div class="flip-card text-center top-to-bottom">
	<div class="flip-card-front dark" style="background-image: url('images/featured/2.jpg');">
		<div class="flip-card-inner">...</div>
	</div>
	<div class="flip-card-back" style="background-image: url('images/featured/3.jpg');">
		<div class="flip-card-inner">...</div>
	</div>
</div>

Image back with overlay: leave off .no-after so the built-in dark overlay keeps text readable over a photo back.

<div class="flip-card-back" style="background-image: url('images/catagories/2.jpg');">
	<div class="flip-card-inner">...</div>
</div>

Tips

• Set an image face with inline background-image; the faces use background-size: cover automatically.
• Add .dark on a face when its background is a photo so text and icons stay light.
• Use .no-after on solid-color backs (like .bg-danger) to drop the extra dark overlay.
• Give the card a fixed height (e.g. inline style="height: 584px;") when using tall image faces so the front and back match.