flipping card with more text on the back

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

See if this answer helps. https://stackoverflow.com/questions/9058801/flip-div-with-two-sides-of-html — Amit Kumar, Jun 28 '18 at 17:58
You can take hint from this one too. https://davidwalsh.name/css-flip — Amit Kumar, Jun 28 '18 at 18:00

score 0 · Accepted Answer · edited Jun 29 '18 at 16:27

#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>

flipping card with more text on the back

1 Answers1