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](https://jsfiddle.net/murday1983/57h2g4yq/27/) 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