Para texto, código, imagen... 1 Título Soy una tarjeta con un efecto de desenfoque,... -

18.07.2015

Para texto, código, imagen...

1 Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

2 Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

3 Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

4 Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

5Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

6 Título

Soy una tarjeta con un efecto de desenfoque, verás mi contenido una vez sitúes el mouse sobre mí.

HTML

<div id="tarjetas"> <div class="tarjeta"><p>1 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>2 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>3 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>4 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>5 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>6 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>7 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div class="tarjeta"><p>8 T&iacute;tulo</p>Soy una tarjeta con un efecto de desenfoque, ver&aacute;s mi contenido una vez sit&uacute;es el mouse sobre m&iacute;.</div><div style="clear: both;">&nbsp;</div></div>

CSS

#tarjetas {width:460px;
 margin: 0 auto;
 background:#f7f7f7;
 border:1px solid #FFF;
 box-shadow:0 0 1px #CCC;
 padding:0 10px 10px 10px;
 }
 .tarjeta {
 float:left;width:200px;
 padding:10px;
 background:#FCFCFC;
 line-height:10px;
 font-size:19px;
 color:transparent;
 text-shadow:0 0 3px black;
 box-shadow: 0 0 7px #ccc;
 border-radius:1px;
 margin-left:10px;
 margin-top:10px;
 -moz-transition: 0.4s;
 -webkit-transition: 0.4s;
 -o-transition: 0.4s;transition: 0.4s;
 }
 .tarjeta:hover {
 box-shadow:2px 2px 1px #ccc; 
 -webkit-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px); 
 -moz-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
 -o-transform: rotate(5deg) scale(1.2) skew(1deg) translate(0px);
 color:#222; 
 text-shadow:0 0 1px white;
 background-image: linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
 background-image: -o-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%);
 background-image: -moz-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
 background-image: -webkit-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
 background-image: -ms-linear-gradient(bottom, rgb(245,245,245) 17%, rgb(255,255,255) 59%); 
 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(245,245,245)), color-stop(0.59, rgb(255,255,255)) ); 
 } 
 .tarjeta p {
 font-size:13px;
 }