.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
color: #ffffff;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {


position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #375BE3;
color: #fffff;
}

/* Style the back side */
.flip-card-back {
background-color: #375BE3;
color: white;
transform: rotateY(180deg);
}

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">

<p>Single Office Space<br /> </p>
<p>hover on for details</p>
</div><!-- end of flip card front -->
<div class="flip-card-back">

<p>details and photos about this option</p>
</div><!-- end of flip card back -->
</div> <!-- end of flip card -->
</div>