Para este caso, vas a necesitar **javascript** que es quien te permite dar lógica a la aplicación.
En este caso la lógica es: *Cuando haga click en una carta, quiero que la misma se de vuelta*.

Con respecto a los estilos **css**, se usa para decir cómo quieres que se vea, y puedes definir 2 clases; una para cuando la carta está normal (boca abajo), y la otra cuando está dada vuelta (boca arriba); la llamaremos a esta `active`. Y cuando decida hacer click en un elemento, el mismo agregue esta clase active. 

Si vas a agregar una nueva clase al elemento, solo te hace falta que tenga las cosas que varían, y no todo lo demás. En este caso

    .card.active {    /* Siendo la clase active la que presenta variación */
        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);
        border: 5px solid green;
    }

Y con javascript, puedes decir:

 - Buscar todas las cartas: `document.querySelectorAll(".card")`
 - Para cada carta, definir que haga algo al hacer click

.

    document.querySelectorAll("#cards .card").forEach(function(card) {
      card.addEventListener('click', function(evento) {
        
      });
    });

 - Y dentro de ese bloque, definís qué querés que haga, en este caso, agregar o remover una clase: `this.classList.toggle("active");`

De esta forma, una carta boca abajo se verá como `<div class="card"></div>`, mientras que una boca arriba se verá como `<div class="card active"></div>`

Por ejemplo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.querySelectorAll(".card").forEach(function(card) {
      card.addEventListener('click', function(evento) {
        this.classList.toggle("active");
      });
    });

<!-- language: lang-css -->

    .card {
      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;
    }

    .card.active {
      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);
      border: 5px solid green;
    }

<!-- language: lang-html -->

    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>


<!-- end snippet -->

----------

Hay que resaltar, que esta es solo **una** forma para resolver tu problema. Cuando usas javascript, estás planteando "cómo" quieres resolver tu problema. Yo puedo pensarlo resolviéndolo de esta forma, otro puede pensarlo creando una clase por cada carta, mantener un estado para cada uno y cambiarlo, y cada uno decide cual forma de resolver usar, porque le parece más simple, más natural, más eficiente, o más mantenible y escalable, etc.