Card Flips

Creating mini-app that flips and zooms individual cards that are laid out on one page.

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="container">
    <!-- Card One -->
    <img id="one" style="cursor:pointer; width:30%;" onclick="switchImg('one','two')" src="https://lh4.googleusercontent.com/-mFYEpMXprYY/VEbJwkJXJaI/AAAAAAAALp4/9GduJ-BGvFk/s524/example-a.jpg" alt="A" />
    <img id="two" style="display:none; cursor:pointer; width:30%;" onclick="switchImg('two','one')" src="https://lh6.googleusercontent.com/-ElSRd-aC0lI/VEbJ0fwy4rI/AAAAAAAALqQ/kVli8v9s-Cw/s524/example-b.jpg" alt="B" />
    <!-- Card Two -->
    <img id="three" style="cursor:pointer; width:30%;" onclick="switchImg('three','four')" src="https://lh5.googleusercontent.com/-XfqG26ltMm4/VEbJ0egpaUI/AAAAAAAALqM/Q3eL6avhUJQ/s524/example-c.jpg" alt="C" />
    <img id="four" style="display:none; cursor:pointer; width:30%;" onclick="switchImg('four','three')" src="https://lh4.googleusercontent.com/-KieQ3h-5Lp8/VEbJ0fjArLI/AAAAAAAALqI/bYxzgCuxQxo/s524/example-d.jpg" alt="D" />
    <!-- Card Three -->
    <img id="five" style="cursor:pointer; width:30%;" onclick="switchImg('five','six')" src="https://lh5.googleusercontent.com/-aa_TydW4QbA/VEbKcwU_foI/AAAAAAAALqY/_fEGuyjnb5c/s524/example-e.jpg" alt="E" />
    <img id="six" style="display:none; cursor:pointer; width:30%;" onclick="switchImg('six','five')" src="https://lh3.googleusercontent.com/-_wQu4iMCRaY/VEbK0snmzAI/AAAAAAAALqg/d1F76OXqE7U/s524/example-f.jpg" alt="F" />
</div>

CSS

#container {
    float:left;
    position:relative;
    margin:auto 0;
    width:100%;
}
#one, #two, #three, #four, #five, #six {
    z-index:10;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}

#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover {
    transform: scale(0.1);
}

JavaScript

function switchImg(a,b) {
    $('#'+a).css('display', 'none');
    $('#'+b).css('display', 'inline');   
}