flipping card with more text on the back - html

Question

I am trying to make my cards as flipping cards, I have created the following CSS which explains what my card look like, however I am not able to make them flipping whenever I hover my mouse on it.
.row {
padding-top: 25px;
}
.card {
display: block;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #E0E0E0s;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition: box-shadow .25s;
border-right: 100%;
}
.card:hover {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.img-card {
width: 100%;
height: 200px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
display: block;
overflow: hidden;
}
.img-card img {
width: 100%;
height: 200px;
object-fit: cover;
transition: all .25s ease;
}
.card-content {
padding: 15px;
text-align: left;
}
.card-title {
margin-top: 0px;
font-weight: 700;
font-size: 1.65em;
}
.card-title a {
color: #000;
text-decoration: none !important;
}
.card-read-more {
border-top: 1px solid #D4D4D4;
}
.card-read-more a {
text-decoration: none !important;
padding: 10px;
font-weight: 600;
text-transform: uppercase
}
<div class="col-xs-12 col-sm-4">
<div class="card">
<a class="img-card" href="http://www.fostrap.com/">
<img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" />
</a>
<br />
<div class="card-content">
<h4 class="card-title">
<a href="http://www.fostrap.com/">
BMW X5 SERIES
</a>
</h4>
<div class="">
New Delhi, 2005, Petrol
</div>
</div>
<div class="card-read-more">
<a class="btn btn-link btn-block" href="http://www.fostrap.com/">
BID NOW
</a>
</div>
</div>
</div>
I added hover class which was totally a wrong approach, please let me know which class might help me with it. thank you

Answer 1

#f1_container {
position: relative;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
}
<div class="col-xs-12 col-sm-4">
<div id="f1_container">
<div class="card">
<div id="f1_card" class="shadow">
<div class="front face">
<a class="img-card" href="http://www.fostrap.com/">
<img src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" />
</a>
<br />
<a href="http://www.fostrap.com/">
BMW X5 SERIES
</a> New Delhi, 2005, Petrol
</h4>
<a class="btn btn-link btn-block" href="http://www.fostrap.com/">
BID NOW
</a>
</div>
<div class="back face center">
<a class="img-card" href="http://www.fostrap.com/">
<img src="https://images.pexels.com/photos/112460/pexels-photo-112460.jpeg?auto=compress&cs=tinysrgb&h=350" />
</a>
</div>
</div>
</div>
</div>
</div>