Es necesario conocer JavaScript, este nos permite  interactuar con la pagina web. Te dejo un ejemplo funcional utilizando JS+CSS, espero te sea util.

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

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

     var posicioncarta = 1; //1=Carta boca abajo / 0=Carta boca arriba
    	  function Click() {
    	  	if (posicioncarta==1){
    	  		document.getElementById('carta').className='card2';
    	  		posicioncarta=0;
    	  	}
    	  	else{
    	  		document.getElementById('carta').className='cards';
    	  		posicioncarta=1;	
    	  	}
    	  }

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

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

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

    <div class="cards" id="carta" onclick="Click()"></div>

<!-- end snippet -->

 El ejemplo es muy sencillo y se entiende que es para ejemplificar la funcionalidad de JavaScript con el fin de lograr el resultado. La solución no es la mas optima(a modo de recursos) ya que estamos cargando las imágenes una y otra vez, una mejor opción seria tener cargadas las dos imágenes desde un comienzo y jugar sus atributos de visibilidad para ocultar una y mostrar otra.