Card Flips 1.1

An improvement for the user but not the fully functioning mini-app yet.

by Paul Schmitt

HTML

<div id="preload">
    <img src="https://lh4.googleusercontent.com/-mFYEpMXprYY/VEbJwkJXJaI/AAAAAAAALp4/9GduJ-BGvFk/s524/example-a.jpg" width="1" height="1" alt="A" />
    <img src="https://lh6.googleusercontent.com/-ElSRd-aC0lI/VEbJ0fwy4rI/AAAAAAAALqQ/kVli8v9s-Cw/s524/example-b.jpg" width="1" height="1" alt="B" />
    <img src="https://lh5.googleusercontent.com/-XfqG26ltMm4/VEbJ0egpaUI/AAAAAAAALqM/Q3eL6avhUJQ/s524/example-c.jpg" width="1" height="1" alt="C" />
    <img src="https://lh4.googleusercontent.com/-KieQ3h-5Lp8/VEbJ0fjArLI/AAAAAAAALqI/bYxzgCuxQxo/s524/example-d.jpg" width="1" height="1" alt="D" />
    <img src="https://lh5.googleusercontent.com/-aa_TydW4QbA/VEbKcwU_foI/AAAAAAAALqY/_fEGuyjnb5c/s524/example-e.jpg" width="1" height="1" alt="E" />
    <img src="https://lh4.googleusercontent.com/-eLsaIjwvgWU/VEYZZaKkPVI/AAAAAAAALps/9eeXxPJ55yE/s524/card-back-c.jpg" width="1" height="1" alt="F" />
</div>
<div id="container-a">
    <!-- 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')"...

CSS

#preload { 
display: none; 
}

#container-a {
    float:left;
    position:relative;
    margin:auto 0;
    width:100%;
}
#one, #two, #three, #four, #five, #six {
    z-index:10;
}
#one:hover, #two:hover, #three:hover, #four:hover, #five:hover, #six:hover {
    transform: scale(2);
    -webkit-transform: scale(2);
}

JavaScript

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