@charset "utf-8";
/* CSS Document */

.ex1 img{  /*  Efecto sombra al seleccionar la imagen se coloca un background*/
    float: left;
    margin: 15px;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
}

.ex1 img:hover {
    margin-top: 4px;
	background-color: #757575;
	border-radius: 5%; 
	
}



.ex2 img {  /*  esté ejemplo modifica el margin-top de la imagen quedando destacada por encima de las demás. Una buena idea para un menú o barra de navegación.*/
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-ms-transition: margin 0.5s ease-out;
transition: margin 0.5s ease-out;
}
.ex2 img:hover {
margin-top: 2px;
}


 /*  Efecto zoom */

#container {
width: 300px;
margin: 0 auto;
}
.ex3 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.ex3 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}

/*Fin de efecto ZOOM  */ 



 /*  Efecto giro */
#containerEx4 {
width: 800px;
margin: 0 auto;
}
.ex4 img {
margin: 20px;
border: 5px solid #eee;
-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;
}
.ex4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);
}

/*Fin de efecto giro */ 



/* Un dos por uno, aunque solo funciona en navegadores -webkit (como son Chrome y Safari), pero dota a las imágenes de un reflejo que siempre lo hemos tenido que trabajar con Photoshop.   */
.ex7 img {
    margin: 25px;
    opacity: 0.8;
    border: 10px solid #eee;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
 
.ex7 img:hover {
    opacity: 1;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
    box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

/* FIN  */

/* Efecto texto deslizante junto a la imagen   */

#ex4 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent; font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#ex4:hover {
line-height: 133px;
color: #575858;
}
#ex4 img{ float: left;
margin: 0 15px;
}

/* FIN  */


 /*sombra al poner el ratón para el ex6 */


.ex6 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
/*** aquí va la sombra ***/
-webkit-box-shadow: 0 0 5px #999;
-moz-box-shadow: 0 0 5px #999;
-ms-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
}

/*   FIN  */



#ex5 { 
margin: 0 auto; 
min-height: 80px;
 } 
 
#ex5 img { 
margin: 5px; 
opacity: 0.9;  
/*Transition*/ 
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
/*Reflection*/ 
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } 

#ex5 img:hover { 
-webkit-border-radius: 25px; 
border-radius: 25px;  
opacity: 1; 
/*Reflection*/ 
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); 
/*Glow*/ 
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
box-shadow: 0px 0px 20px rgba(255,255,255,0.8); 
}

.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}