HTML<div class="grow pic"><img src="https://lh6.googleusercontent.com/-bte6ghm6yiA/VBQGkqatOSI/AAAAAAAA_Iw/X3HxCwDzzho/s150-no/1.gif" alt="portrait" /></div>

CSS/*GROW*/
 .grow img {
 height: 150px;
 width: 150px; 
border: 2px dotted #fff; border-radius: 1em;
 -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -o-transition: all 1s ease;
 -ms-transition: all 1s ease;
 transition: all 1s ease;
 } 
 .grow img:hover {
 width: 200px;
 height:200px;
 }

HTML<ul class="ch-grid"><li>
 <div class="ch-item ch-img-1">
 <div class="ch-info-wrap">
 <div class="ch-info">
 <div class="ch-info-front ch-img-1">&nbsp;</div>
 <div class="ch-info-back">
 <h3>Con amor</h3>
 <p>muchu gusto y placer presento<a href="http://tutorialgloriav.eklablog.com/">Gran tutorial</a></p>

CSS.ch-item { 
border-radius: 50% 50% 50% 50%; 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 
cursor: default; 
height: 100%; 
position: relative; 
width: 100%; 
} 
.ch-info-wrap { background: transparent url(https://lh4.googleusercontent.com/-vQTWCguVppI/VH35HZyXvHI/AAAAAAABO8I/tP6PehMgG-k/w150-h140-no/1-150x140%2B%281%29.gif) repeat scroll 0 0 ; 
border-radius: 50% 50% 50% 50%; 
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 3px rgba(115, 114, 23, 0.8) inset; 
height: 180px; 
left: 20px; 
perspective: 800px; 
position: absolute; 
top: 20px; 
transition: all 0.4s ease-in-out 0s;
width: 180px; 
} 
.ch-info { 
border-radius: 50% 50% 50% 50%; 
height: 180px; 
position: absolute; 
transform-style: preserve-3d; 
transition: all 0.4s ease-in-out 0s; width: 180px; 
} 
.ch-info > div { backface-visibility: hidden; 
background-position: center center;
border-radius: 50% 50% 50% 50%; 
display: block; 
height: 100%; 
position: absolute; width: 100%; 
} 
.ch-info .ch-info-back { background: none repeat scroll 0 0 #f6e6f3; 
transform: rotate3d(0, 1, 0, 180deg); 
} 
.ch-img-1 { background-image: url("https://lh3.googleusercontent.com/-vuIcl__v6iY/VH9UxgLLo7I/AAAAAAABPAw/G_l347ynhnE/w150-h140-no/2.gif"); 
} 
.ch-info h3 { color: #FFFFFF; font-family: 'Open Sans',Arial,sans-serif;
font-size: 14px; 
height: 50px; 
letter-spacing: 2px; 
margin: 0 15px; 
padding: 40px 0 0; 
text-shadow: 0 0 1px #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.3); text-transform: uppercase; 
} 
.ch-info p { 
border-top: 1px solid rgba(255, 255, 255, 0.5); 
color: #FFFFFF; 
font-size: 12px; 
font-style: italic; 
margin: 0 30px; 
padding: 10px 5px; 
} 
.ch-info p a { 
color: rgba(255, 255, 255, 0.7); 
display: block; 
font-family: 'Open Sans',Arial,sans-serif; 
font-size: 9px; 
font-style: normal; 
font-weight: 700; 
letter-spacing: 1px; 
padding-top: 4px; 
text-transform: uppercase; 
} 
.ch-info p a:hover { 
color: rgba(255, 242, 34, 0.8); 
} 
.ch-item:hover .ch-info-wrap { 
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 3px rgba(115, 114, 23, 0.8) inset; 
} 
.ch-item:hover .ch-info { transform: rotate3d(0, 1, 0, -180deg); 
} 
.ch-grid { 
display: block; 
list-style: none outside none; margin: 20px 0 0; 
padding: 0; 
text-align: center; 
width: 100%; 
} 
.ch-grid:after, .ch-item:before { 
content: ""; display: table; 
} 
.ch-grid:after { 
clear: both; 
} 
.ch-grid li { 
display: inline-block; 
height: 220px; 
margin: 20px; 
width: 220px; 
}

HTML<div class="rotarY"><img style="border: 2px dotted #ccc; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: #6d3112 3px 3px 9px; -moz-box-shadow: #6d3112 3px 3px 9px; box-shadow: #6d3112 3px 3px 11px;" src="https://lh5.googleusercontent.com/-yP5NBuXKVY4/VJGtQiSf3lI/AAAAAAABQsI/EXjzy2exPp0/w213-h300-no/1-213x300.gif" alt="" width="235" height="299" /></div>

CSS.rotarY{
 transform:rotateY(0deg);
 transition-duration: 2s;
 -webkit-transform:rotateY(0deg);
 -webkit-transition-duration: 2s;
 }
 .rotarY:hover{
 transform:rotateY(180deg);
 transition-duration: 2s;
 -webkit-transform:rotateY(100deg);
 -webkit-transition-duration: 2s;
 }

HTML<div id="containerEx3"><div class="ex3"> <img alt="img0" src="http: ../imagen0.jpg"width="190" height="170" /> <img alt="img1" src="http: ../imagen1.jpg" width="190" height="170"/> <img alt="img2" src="http: ../imagen2.jpg" width="190" height="170"/> <img alt="img3" src="http: ../imagen3.jpg" width="190" height="170"/> </div></div>

CSS<style type="text/css"><!-- 
#containerEx3 {width: 800px;
margin: 0 auto;
}
.ex3 img {
margin: 20px;
border: 2px dotted #fff; 
border-radius: 1em;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.ex3 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);
}
--></style>

HTML<div class="cardfan"><img src="https://img-fotki.yandex.ru/get/5706/nata-komiati.a9/0_5f72a_68382310_GIFL.gif" alt="" /> <img src="https://lh4.googleusercontent.com/-VfLErbvbRnI/Uv3cThM4GPI/AAAAAAAAAtQ/dYkiW8imO6g/w500-h260-no/2.gif" alt="" /> <img src="http://images01.rememes.com/images/2013/07/279eda80-f078-11e2-9a4a-7054d21a8f10.gif" alt="" /></div>

CSS<style type="text/css"><!-- 
 div.cardfan { 
 height: 356px; 
 width: 700px; 
 margin: 2rem auto 0;
 position: relative; 
 }
 div.cardfan img { 
 position: absolute; 
 left: 140px; 
 width: 220px; 
 height: 200px;

 border: 2px solid #fff; 

 border-radius: 1em;

  box-shadow: 3px 2px 6px #000000;

 transform-origin: center 400px; 
 transition: all .6s linear; 
 }
 div.cardfan img:first-child { transform: rotate(5deg); } div.cardfan img:last-child { 
 transform: rotate(-5deg); 
 }
 div.cardfan:hover img:first-child { 
 transform: rotate(25deg); 
 } 
 div.cardfan:hover img:last-child { 
 transform: rotate(-25deg); 
 }
 body{ background-color: #f4f4f4;
 } 
 --></style> 

HTML

<div class="element"> 
 <div class="img"><img src="https://lh6.googleusercontent.com/-_l3PR-U8_FY/VOcpWz4-QpI/AAAAAAABc0M/wco-gPSSM0s/w223-h300-no/2-223x300%2B%281%29.gif" alt="" /></div> 
 <div class="description"> 
 <p>"&iquest;Los l&iacute;mites existen? &lsquo;Oh no, esos son creaciones modernas de tu sociedad, en el idioma universal no existe la expresi&oacute;n l&iacute;mite, s&oacute;lo existe la manifestaci&oacute;n de la expresi&oacute;n de la infinidad", respuesta del Maestro Malatai a esta pregunta</p> 
 </div> 
 </div> 

CSS

.element {
border: 2px dotted #330e02;
 border-radius: 5%/10%;
background: #fff;
float: left;
height: 320px;
margin-right: 10px;
overflow: hidden;
position: relative;
width: 417px;
}

.element a {
text-decoration: none;
color: #000;
}

.img, .description {
height: 300px;
}

.img {
margin-top: 0;
background: #fff;
-webkit-transition-property: margin-top;
-webkit-transition-duration: .5s;

-moz-transition-property: margin-top;
-moz-transition-duration: .5s;

-o-transition-property: margin-top;
-o-transition-duration: .5s;

-ms-transition-property: margin-top;
-ms-transition-duration: .5s;

}

.element:hover .img {
margin-top: -120px;
}

.description {
background: #fdf8d2;
color: #000;
font-family: Edwardian Script ITC;
font-size: 22px;
}


.description p {
padding:0 0 0 5px;
}

HTML<ul id="galeria">
 <li><img src="https://lh4.googleusercontent.com/-XKMrCBgRcJg/U-C07fYE6OI/AAAAAAAA0bs/u3dL2-3UK-0/w500-h279-no/1.gif" alt="" width="190" height="170" /></li><li><img src="https://lh4.googleusercontent.com/-VJRrKeKG9qc/U-C1SXebPQI/AAAAAAAA0cE/YGbzIb7BqhA/w500-h368-no/1.gif" alt="" width="190" height="170" /></li></ul>

CSS<style type="text/css"><!--
ul#galeria { 
list-style: none; 
} 
ul#galeria li { 
float:left; 
} 
ul#galeria li img { 
border: 1px dotted #ccc; 
border-radius: 1em; 
box-shadow: 3px 2px 6px #000000; 
opacity: 0.5; 
} 
ul#galeria img:hover { opacity: 1;
 z-index:100; 
-moz-transform:scale(1.5); 
/* zoom en navegador Firefox */ 
-webkit-transform:scale(1.5); 
/* zoom en navegador Chrome y Safari */ 
-o-transform:scale(1.5);
 }
 /* zoom en navegador Opera */
 ul#galeria li:nth-child(3n) { float: none; 
}
 /* cambiando el 3 variamos el nº de imágenes por fila */
 /* IE no soporta la propiedad transform de CSS 3 */
  --></style>

Amor, amor, amor...

El amor es como una guerra, fácil de iniciar, difícil de terminar, imposible de olvidar.

HTML<div id="recuadro1">
 <h3>Amor, amor, amor...</h3>
 <a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://www.glamik.ru/Glamik/melkie_cvetoch/54.gif" alt="" /></a>
 <p>Texto</p></div>

CSS<style type="text/css"><!--#recuadro1{
 left:30px;
 position:relative;
 border-radius: 20px; 
 background-color:#feeef0;
 width:200px;
 height:240px;
 padding:4px;
 -moz-animation-name: animacion1;
 -moz-animation-duration: 4s;
 -webkit-animation-name: animacion1;
 -webkit-animation-duration: 4s;
 -o-animation-name: animacion1;
 -o-animation-duration: 4s;
 } 

@-moz-keyframes animacion1 {
 from {
 left:30px;
 background-color:#fcdce0;
 }
 to {
 left:300px; 
 background-color:#f0608e;
 }
 }
 
@-webkit-keyframes animacion1 {
 from {
 left:30px;
 background-color:#fcdce0;
 }
 to {
 left:300px; 
 background-color:#f0608e;
 }
 }
@-o-keyframes animacion1 {
 from {
 left:30px;
 background-color:#fcdce0;
 }
 to {
 left:300px; 
 background-color:#f0608e;
 }
 } 

 body {
 background:white;
 }
 --></style>

HTML<div class="separator"><a><img src="http://file.mobilmusic.ru/a7/56/c6/1173558.gif" alt="" width="240" height="270" /></a></div>

CSS.separator { margin: 20px; text-align: center;
clear: both; 
} 
.separator a {
display: table; 
position: relative; 
z-index: 10; 
max-width: 94% !important;
margin: 10px auto !important; 
} 
.separator img { 
display: table-cell; 
max-width: 100% !important;
padding: 15px;
background: #fff; 
border-radius:160%/20%; 
-webkit-box-shadow: 0 1px 5px #999;
-moz-box-shadow: 0 1px 5px #999; 
box-shadow: 0 1px 5px #999;
 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
} 
.separator a:before;
.separator a:after { 
content: ""; 
display: block; 
position: absolute; 
top: -5px; left: 0; 
width: 100%; 
height: 100%; 
background: white; 
border-radius:160%/20%;
-webkit-box-shadow: 0 1px 5px #999; 
-moz-box-shadow: 0 1px 5px #999; 
box-shadow: 0 1px 5px #999; 
-webkit-transition: .3s all; 
-moz-transition: .3s all; transition: .3s all;
} 
.separator a:before { 
z-index: -2; -webkit-transform: rotate(2deg); 
-moz-transform: rotate(2deg); 
transform: rotate(2deg);
border-radius:160%/20%; 
} 
.separator a:after { 
z-index: -3; 
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg); 
transform: rotate(-3deg); 
} 
.separator a:hover:before; 
.separator a:hover:after { 
top: -2px; 
left: 2px; 
bottom: 0; 
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}

HTML<div class="title"><img src="http://frimousse67.f.r.pic.centerblog.net/70054f10.gif" alt="" width="164" height="146" /></div>

HTML<div class="screen"><div class="header">    Crosses | Library | New Packs  </div>  <div class="cube blue">    <div class="title">      SOMEBODY THAT U USED TO KNO      <span>GYOTE</span>    </div>  </div>  <div class="cube red">    <div class="title">    2 MILLION    <span>AVICII</span>    </div>  </div>  <div class="cube next">    <div class="title">      SHAKE DAT      <span>SAVAGE</span>    </div>  </div>  <div class="cube nextNext">    <div class="title">      NEXT SONG 0.9 OPACITY      <span>nextsongartist</span>      </div></div></div>

CSSh1, h3 {
 color:#;
 font-family:sans-serif;
 }
 
 .screen {
 background:#;
 width:506px;
 height:270px;
 overflow:hidden;
 position:relative;
 -webkit-perspective:400px;
 }
 
 .cube {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 position:absolute;
 }
 .cube .title {
 color:#;
 font-family:sans-serif;
 font-weight:lighter;
 padding:3px;
 }
 .title span {
 display:block;
 font-size:12px;
 padding-top:3px;
 }
 
 .red {
 background:#;border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 top:50px;
 left:278px;
 -webkit-transform-origin: right center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: -webkit-transform 0.5s ease-in-out;
 z-index:50;
 }
 
 .blue {
 background:#;border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 top:50px;
 left:78px;
 -webkit-transform-origin: left center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: -webkit-transform 0.5s ease-in-out;
 z-index:50;
 }
 
 .header {
 background:#;border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 position:absolute;
 top:-20px;
 height:10px;
 line-height:10px;
 color:#fff;
 font-weight:bold;
 font-family:sans-serif;
 text-align:center;
 width:0%;
 opacity:0.8;
 -webkit-transition: -webkit-transform 0.5s ease;
 }
 
 .screen:hover .red {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transform: rotateY(-70deg) translateX(150px) translateY(24px) translateZ(50px);
 }
 .screen:hover .blue {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transform: rotateY(70deg) translateX( -150px ) translateY(24px) translateZ(50px); }
 
 .screen:hover .header {border: 2px dotted #fff;
 border-radius: 1em;
 box-shadow: 3px 2px 6px #000000;
 -webkit-transform: translateY(40px);
 }
 
 .screen:hover .next {border: 2px dotted #fff;
 border-radius: 1em/1em;
 box-shadow: 3px 2px 6px #000000;
 opacity:1;
 margin-top:0px;
 }
 
 .next {
 background:#;
 top:50px;
 left:178px;
 -webkit-transform-origin: left center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 0.6s ease-in-out;
 z-index:1;
 -webkit-transform: translate3d( -50px, 400px, -800px );
 opacity:0.4;
 } 
 .screen .next {
 -webkit-transform: translate3d( 0px, 20px, 0px );
 box-shadow:none;
 opacity:0;
 margin-top:150px;
 } .nextNext {
 background:#; 
 top:50px;
 left:178px;
 -webkit-transform-origin: left center;
 -webkit-transform-style: preserve-3d;
 -webkit-transition: all 0.6s ease-in-out;
 z-index:100;
 -webkit-transform: translate3d( 0px, 600px, 600px );
 opacity:0.4;
 }
 .screen:hover .nextNext { 
 -webkit-transform: translate3d( 0px, 240px, 0px );
 box-shadow:none;
 opacity:0.9;
 } 

Séneca

No hay cosa más fuerte que el verdadero amor.

HTML

<div id="recuadro1">
 <h3>Texto</h3>
 <p>Texto</p></div>

CSS

#recuadro1{
  border-radius: 20px;  
  background-color:#E1CCDE;
  width:200px;
  height:200px;
  padding:8px;
  -moz-animation-play-state:paused;
  -moz-animation-name: animacion1;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -webkit-animation-play-state:paused;
  -webkit-animation-name: animacion1;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -o-animation-play-state:paused;
  -o-animation-name: animacion1;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
}

#recuadro1:hover {
  -moz-animation-play-state:running;
  -webkit-animation-play-state:running;
  -o-animation-play-state:running;
}

@-moz-keyframes animacion1 {
  from {
    border-radius:0px;
    background-color:#E1CCDE;
  }
  to {
    border-radius:40px;
    background-color:#F4B9EB;
  }
}

@-webkit-keyframes animacion1 {
  from {
    border-radius:0px;
    background-color:#E1CCDE;
  }
  to {
    border-radius:40px;
    background-color:#F4B9EB;
  }
}

@-o-keyframes animacion1 {
  from {
    border-radius:0px;
    background-color:#E1CCDE;
  }
  to {
    border-radius:40px;
    background-color:#F4B9EB;
  }
}


body {
  background:white;
  margin:50px;
}

HTML

<div id="sq"> 
 <div class="circ1">Te amo</div> 
 <div class="circ2"><a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://imagenes.gifmania.com.pr/Gifs-Animados-Amor/Animaciones-Corazones/Imagenes-Animadas-Corazones-Colores/corazon-colores16.gif" alt="" /></a></div> 
 <div class="circ3">Con coraz&oacute;n y alma</div> 
 </div> 

CSS

<style><!--.circ1{ 
 width:160px; 
    height:160px;    
    border-radius:120px; 
    background-color:rgb(255, 255, 255);       
    }
.circ2{ 
    width:150px; 
    height:180px;       
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);    
    } 
        
.circ3{ 
    width:150px; 
    height:220px;    
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);       
    }
.circ1{    
    width:120px; 
    height:120px;    
    border-radius:120px; 
    background-color:rgb(255, 255, 255);    
         margin:20px 0 0 60px;    
    } 

.circ2{ 
    width:150px; 
    height:80px;       
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);    
         margin:-90px 0 0 80px; 
    } 
        
.circ3{ 
    width:150px; 
    height:90px;    
    border-radius: 80px / 50px; 
    background-color:rgb(255, 255, 255);    
    margin:-90px 0 0 0px;    
    }
@-webkit-keyframes animar{ 
     0%  { }  
      50% { -webkit-transform:translateX(700px) scale(1.2);} 
      100% {-webkit-transform:translateX(0px); } 
}
#sq{ 
    -webkit-animation-name: animar; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: lineal; 
    -webkit-animation-iteration-count:infinite; 
    opacity: 0.6; 
    margin:0; 
    position:absolute; 
}
#sq{ 
    -webkit-animation-name: animar; 
    -webkit-animation-duration: 20s; 
    -webkit-animation-timing-function: lineal; 
    -webkit-animation-iteration-count:infinite; 
    opacity: 0.6; 
    margin:0; 
    position:absolute; 
} 

#sq2{ 
    -webkit-animation-name: animar;
    }
 --></style>

HTML<div class="bwaizum pic"><img style="border: 1px dotted #707070; -webkit-border-radius: 1em; -moz-border-radius: 1em; border-radius: 1em; -webkit-box-shadow: 3px 2px 6px #000000; -moz-box-shadow: 3px 2px 6px #000000; box-shadow: 3px 2px 6px #000000;" src="http:// .jpg" alt="" width="250" height="230" /></div>

CSS/*B&W*/.bwaizum { 
-webkit-transition: all 1s ease; 
-moz-transition: all 1s ease; 
-o-transition: all 1s ease; 
-ms-transition: all 1s ease; 
transition: all 1s ease; } 
.bwaizum:hover { 
-webkit-filter: grayscale(100%); }

HML<div class="sombra"><img style="border: 2px solid #fff; -webkit-border-radius: 1em/1em; -moz-border-radius: 1em/1em; border-radius: 1em/1em; box-shadow: 3px 2px 6px #000000;" src="https://lh6.googleusercontent.com/-aCSnJVK3FoQ/VJ2J1EwVbEI/AAAAAAABTMU/wwhJCTvM6eY/w216-h290-no/1-216x290.gif" alt="" width="145" height="229" /></div>

CSS<style><!--
.sombra { 
  border: 2px solid #fff; 
border-radius: 1em/1em;
 
box-shadow: none; 
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false); } 
.sombra:hover { 
 width: 148px; 
height: 236px; 
 
  webkit-box-shadow: 0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4;   
moz-box-shadow: 0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4; 
box-shadow:0 0 25px #CA008B, 3px 4px 20px #5A00CA, -3px 4px 25px #00CA92, -3px -3px 25px #00CA6E, 3px -3px 25px #CABC00,3px 3px 25px #CA3D00,-3px -3px 25px #00CAC4; 
    
>filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
--></style>

HTML<ul class="thumb">

<ul class="thumb">

<li><img src="http://file.mobilmusic.ru/09/68/da/803960.gif" alt="" width="150" height="180" /></li>

<li><img src="http://file.mobilmusic.ru/63/5e/bc/1281199.gif" alt="" width="150" height="180" /></li>

<li><img src="http://file.mobilmusic.ru/fa/66/47/699794.gif" alt="" width="150" height="180" /></li>
<li>Con amor. GloriaV</li>

</ul>

</ul>

CSS<style><!--/* la lista flota a la izquierda porque quiero que el DIV con el texto se muestre a su lado */ /* por ese motivo, debo dimensionarla con width y height */ 
ul.thumb { 
float: left; 
height: 400px; 
list-style: none; 
margin: 0; 
position: relative; 
width: 300px; 
} /* cada item es una imagen que fuerzo a que se muestren pequeñas */ 
ul.thumb li { 
/* se posicionand e manera absoluta */ 
position: absolute; 
left: 80px; 
top: 0; 
z-index: 0; 
/* algo de decoración */ 
background-color: #; 
box-shadow: 0 0 10px #444 inset; 
padding: 4px; 
/* el tamaño de la imagen a mostrar */ 
height: 202px; 
width: 150px; 
/* la transición será el efecto */ 
-moz-transition: all 1s ease-in-out 0s; 
-webkit-transition: all 1s ease-in-out 0s; 
-o-transition: all 1s ease-in-out 0s; 
} 
ul.thumb li img { 
height: 100%; 
width: 100%; 
} 

/* cada item se posiciona y se rota a gusto */ 
ul.thumb li:nth-child(1) { 
-moz-transform: rotate(20deg); 
-webkit-transform: rotate(20deg); 
-o-transform: rotate(20deg); 
margin-left: 150px;
margin-top: 0px; 
} 
ul.thumb li:nth-child(2) { 
-moz-transform: rotate(-30deg); 
-webkit-transform: rotate(-30deg); 
-o-transform: rotate(-30deg); 
margin-top: 0px; 
} 
ul.thumb li:nth-child(3) { 
-moz-transform: rotate(-15deg); 
-webkit-transform: rotate(-15deg); 
-o-transform: rotate(-15deg); 
margin-left: 240px;
margin-top: 0px; 
} 
ul.thumb li:nth-child(4) { 
-moz-transform: rotate(10deg); 
-webkit-transform: rotate(10deg); 
-o-transform: rotate(10deg); 
margin-left: 100px;
margin-top: 150px; 
} 
/* el efecto al poner el cursor encima */ 
ul.thumb li:hover { 
/* se elimina la rotación */ 
-moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
/* se muestra la imagen con su tamaño real */ 
height: 275px; 
width: 300px; 
/* se la posiciona y se la pone en primer plano */ 
margin-left: 0px; 
margin-top: -50px; 
z-index:10; 
/* algo de decoración */ 
border-radius: 10px; 
padding:20px; 
}
--></style>

CSS#content img:hover{
   opacity: 1; 
   -webkit-box-shadow: 0px 0px 15px #000000;
   box-shadow: 0px 0px 50px #000000;
   }
   #content img {  -webkit-border-radius: 00px;
   border-radius: 00px;
   -webkit-transition: 0.4s linear;
   transition: 0.4s linear;
 }
 .module_contenu  img:hover {opacity: 2;   -webkit-transition: 500ms;
     -webkit-transform: rotate(10deg);
     border-radius: 5px 25px 5px 25px;
     }