A CSS expand effect

This is a demo page that accompanies the HOWTO document that shows you how you can use CSS transitions to get lots of miniature charts shown on your page that expand and get bigger when clicked.

[No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support] [No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.bar.js"></script>
<script src="RGraph.common.line.js"></script>
<script src="RGraph.common.hbar.js"></script>
<script src="RGraph.common.waterfall.js"></script>
Put this where you want the chart to show up:
<div id="container">
    <canvas id="cvs1" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs2" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs3" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs4" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs5" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs6" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs7" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs8" width="900" height="375" tabindex="1">[No canvas support]</canvas>
    <canvas id="cvs9" width="900" height="375" tabindex="1">[No canvas support]</canvas>
</div>

<style>
    #container {
        position: relative;
        width: 900px;
        height: 375px;
        margin-left: auto;
        margin-right: auto;
    }

    #container canvas {
        outline: none;
        position: absolute;
        transition: top .5s, left .5s, width .5s, height .5s, z-index .5s, transform .25s, box-shadow .5s;
        transition-delay: .25s;
        z-index: 0;
        background-color: rgba(255,255,255,0.9);
        width: 300px;
        height: 125px;
    }

    #container canvas#cvs1 {top: 0;     left: 0;}
    #container canvas#cvs2 {top: 0;     left: 300px;}
    #container canvas#cvs3 {top: 125px; left: 0;}
    #container canvas#cvs4 {top: 125px; left: 300px;}
    #container canvas#cvs5 {top: 0;     left: 600px;}
    #container canvas#cvs6 {top: 125px; left: 600px;}
    #container canvas#cvs7 {top: 250px; left: 0;}
    #container canvas#cvs8 {top: 250px; left: 300px;}
    #container canvas#cvs9 {top: 250px; left: 600px;}

    #container canvas#cvs1:focus,
    #container canvas#cvs2:focus,
    #container canvas#cvs3:focus,
    #container canvas#cvs4:focus,
    #container canvas#cvs5:focus,
    #container canvas#cvs6:focus,
    #container canvas#cvs7:focus,
    #container canvas#cvs8:focus,
    #container canvas#cvs9:focus {
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        z-index: 999;
        box-shadow: 0 0 25px #ccc;
    }

    @media screen and (max-width: 700px) {
        #container {width: 600px; height: 625px}
        #container canvas#cvs1 {top: 0;     left: 0;}
        #container canvas#cvs2 {top: 0;     left: 300px;}
        #container canvas#cvs3 {top: 125px; left: 0;}
        #container canvas#cvs4 {top: 125px; left: 300px;}
        #container canvas#cvs5 {top: 250px; left: 0px;}
        #container canvas#cvs6 {top: 250px; left: 300px;}
        #container canvas#cvs7 {top: 375px; left: 0;}
        #container canvas#cvs8 {top: 375px; left: 300px;}
        #container canvas#cvs9 {top: 500px; left: 0px;}

        #container canvas#cvs1:focus,
        #container canvas#cvs2:focus,
        #container canvas#cvs3:focus,
        #container canvas#cvs4:focus,
        #container canvas#cvs5:focus,
        #container canvas#cvs6:focus,
        #container canvas#cvs7:focus,
        #container canvas#cvs8:focus,
        #container canvas#cvs9:focus {
            left: 0;
            width: 600px;
            height: 250px;
            z-index: 999;
            box-shadow: 0 0 25px #ccc;
        }

        #container canvas#cvs1:focus, #container canvas#cvs2:focus {top:-62.5px;}
        #container canvas#cvs3:focus, #container canvas#cvs4:focus {top:62.5px;}
        #container canvas#cvs5:focus, #container canvas#cvs6:focus {top:187.5px;}
        #container canvas#cvs7:focus, #container canvas#cvs8:focus {top:312.5px;}
        #container canvas#cvs9:focus {top:437.5px;}
    }
</style>
This is the code that generates the chart - it should be placed AFTER the canvas tag(s):