Skip to main content
se eliminaron 29 caracteres en el cuerpo
Origen Enlace

Tal como menciona liu7 se puede realizar medianteEs necesario conocer JavaScript, este nos permite interactuar con la pagina web. Te dejo un ejemplo funcional utilizando JS+CSS, espero te sea util.

Tal como menciona liu7 se puede realizar mediante JavaScript, este nos permite interactuar con la pagina web. Te dejo un ejemplo funcional utilizando JS+CSS, espero te sea util.

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

Origen Enlace

Tal como menciona liu7 se puede realizar mediante JavaScript, este nos permite interactuar con la pagina web. Te dejo un ejemplo funcional utilizando JS+CSS, espero te sea util.

 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;    
        }
      }
.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;
            }
<div class="cards" id="carta" onclick="Click()"></div>

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.