Estoy haciendo un juego minimalista de memoria, para practicar código HTML Y CSS, pero como buen principiante, no encuentro como lograr que cuando el usuario haga click en una carta (no el efecto :hover) esta muestre la parte posterior.
Es decir tengo el siguiente objeto:
Estilizado con este codigo;
.cards {
display: block;
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Royalblue,Royalblue);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Royalblue,Royalblue);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Royalblue,Royalblue);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Royalblue,Royalblue);
background-size: 110px, cover;
background-repeat: no-repeat, no-repeat;
background-position: center;
width: 200px;
height: 255px;
border: 5px solid white;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<div class="cards">
</div>
</html>
Pero quiero que al clickearlo ejecute este codigo en vez del otro, mostrando el "reverso" de la "carta":
.cards {
display: block;
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Red,Red);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Red,Red);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Red,Red);
background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Red,Red);
background-size: 110px, cover;
background-repeat: no-repeat, no-repeat;
background-position: center;
width: 200px;
height: 255px;
border: 5px solid green;
border-radius: 5px;
}
¿Alguien me ayuda?