Creating an overlay view and render it in a dynamic div in backbone

Question

Here is the the framework I have:

....

var showChart = new showChartView({
    el: this.$el.find("#my-chart-div");
    // Other parameters passed in to build the chart
});
showChart.render();

The above view renders a chart graph on the browser.

The css for the div above looks like:

my-chart-div
{
    height: 100,
    width: 300
}

The html:

<div id="my-chart-div"></div>

What I want to do is that when I hover over the div (my-chart-div), there should be an overlaying chart rendered in a bigger size (rendered as an instance of the same view above - ShowChartView but with larger width and height), so the css of that would look something like:

overlay-chart-div
{
    height: 200,
    width: 500
}

Any ideas?

Answer 1

So you just want a slightly bigger chart when you hover over it?

If that is the case this should work perfectly for you:

#my-chart-div:hover {
    transform: scale(1.1) translate(4%, 4%);
}

For bigger just up the scale() to 1.2.