title: Make a Bootstrap 4 Card Flip On Hover
body: <p>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.</p>
  <p>I have the flip part working but I can't seem to get the following working:</p>
  <ul>
  <li>Display the additional info on the flip (at the moment all it does is flip my first view)</li>
  <li>It appears to move the card when it's flipped to the left</li>
  </ul>
  <p>I have this <a href="https://jsfiddle.net/murday1983/57h2g4yq/27/" rel="nofollow noreferrer">fiddle</a> using my HTML and CSS I currently have.</p>
  <pre><code>// 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(&quot;exampleChart&quot;);
  var exampleChart = new Chart(ext, {
      type: 'line',
      data: {
          labels: month,
          datasets: [
              {
                  data: exampleChart,
                  borderColor: &quot;#155724&quot;,
                  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
              }
          }
      }
  });
  </code></pre>
  <p>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.</p>
  <p>As said, I'd only like it to do the flip when hovering over the 'i' icon</p>