Make a Bootstrap 4 Card Flip On Hover

Question

I have a Bootstrap 4 and HTML5 dashboard I am creating and I am trying to make each card displayed, flip to display additional info when the 'i' button is hovered over.

I have the flip part working but I can't seem to get the following working:

• Display the additional info on the flip (at the moment all it does is flip my first view)
• It appears to move the card when it's flipped to the left

I have this fiddle using my HTML and CSS I currently have.

// Our labels along the x-axis
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

// For drawing the lines
var exampleChart = [0, 114, 106, 106, 107, 111, 133, 221, 783, 2478, 2485, 654];


var ext = document.getElementById("exampleChart");
var exampleChart = new Chart(ext, {
    type: 'line',
    data: {
        labels: month,
        datasets: [
            {
                data: exampleChart,
                borderColor: "#155724",
                pointBackgroundColor: '#155724',
                pointBorderWidth: '0',
                pointRadius: '4'
            }
        ]
    },
    options: {
        scales: {
            yAxes: [
                {
                    gridLines: {
                        // color: '#000',
                        display: false
                    },
                    ticks: {
                        display: false // This will remove only the label
                    }
                }
            ],
            xAxes: [
                {
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        display: false // This will remove only the label
                    }
                }
            ]
        },
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
                title: function () { }
            }
        },
        layout: {
            padding: {
                left: 0,
                right: 10,
                top: 5,
                bottom: 0
            }
        }
    }
});

I'd prefer not to have to use jQuery but if I do, then I'd like some sort of dissolve on the top card and for it to re-appear when moved from.

As said, I'd only like it to do the flip when hovering over the 'i' icon

Answer 1

Use this and adjust it to your needs:

.flip_container {
  width: 100%;
  height: 450px;
  cursor: pointer;
}
.flip_container:hover .flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip {
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
}
.flip_front,
.flip_back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.flip_front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.flip_back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 flip_container">
      <div class="flip">
        <div class="flip_front">
           <div class="card">
            <div class="card-body">
                <div class="form-group row">
                    <div class="col-11">
                        <div class="alert-success card-icon">
                          <div class="chartjs-size-monitor">
                            <div class="chartjs-size-monitor-expand">
                              <div class=""></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink">
                              <div class=""></div>
                            </div>
                          </div>
                          <canvas id="exampleChart" class="chartjs-render-monitor" width="400" height="200" style="display: block; width: 400px; height: 200px;"></canvas>
                        </div>
                    </div>
                    <div class="col-1">
                        <i id="extInfoIcon" class="fa fa-info-circle fa-4x text-info" style="cursor: pointer"></i>
                    </div>
                </div>
                <div class="form-group row dashboardCardHeadingRow">
                    <div class="col-12">
                        <div class="card-subtitle text-muted">Card Footer</div>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-6">
                        <div class="card-subtitle text-muted">Heading 1</div>
                        <h4 class="mb-0">0</h4>
                    </div>
                    <div class="col-6">
                        <div class="card-subtitle text-muted">Heading 2</div>
                        <h4 class="mb-0">0</h4>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="flip_back w-100">
          <div class="card">
          <div class="card-body">
            <div class="form-group p-5">
              <h1 class="m-0">John Doe</h1>
              <p class="m-0">Architect & Engineer</p>
              <p class="m-0">We love that guy</p>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>