Simple Javascript Onclick Function

I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limita

Solution 1:

Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:

#card-container:hover.front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

To this:

.card-container:hover.front,
.card-container.selected.front,{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.

---

To make things stay flipeed when clicked, with your new CSS, you do:

var tiles = $('#tiles .card-container');
tiles.click(function() {
    tiles.removeClass('selected');
    $(this).addClass('selected');

    //To change the image in maincontent to match the//one in the flipcard clicked on:
    $('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});