/*
* Desarrollador: Eborio Linárez TSU en Informática
* Sitio Web: http://todoprogramacion.com.ve
* URL al post: http://todoprogramacion.com.ve/articulos/css/crear-efectos-hover-llamativos-con-css3-parte-i
* Autor Original: Alessio Atzeni
* Post Original: http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
*
*
*
* NOTA: Te pido un pequeño agradecimiento de tu parte hacia mi por haber compartido
* estos ejemplos. Puedes hacerlo de tres maneras muy sencillas:
* 1.- Compartiendo mis artículos mediante las redes sociales
* 2.- Haciendo clic sobre los anuncios de Google Adsense que se encuentran presentes en mi sitio web
* 3.- Haciendo un pequeño donativo a través del botón Flattr de mi sitio web
* 4.- Haciendo un pequeño donativo a través del botón Donate de PayPal de mi sitio web
*
* Tu eliges la manera en la cual apoyar mis desarrollos. Te estaré enormemente agradecido 
*
*
*
* Ejemplos probados en los siguientes navegadores:
* Google Chrome 22
* Mozilla Firefox 16
* Apple Safari 5.1.7
* Internet Explorer 10
* Opera Browser 12.02
*/

/* Definiomos los estilos generales*/
.vista {
    width: 200px;
    height: 150px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
}
.vistaSinImagen {
    width: 200px;
    height: 100px;
    margin: 10px;
    float: left;
    border: 10px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
}
.vista .mascara, .vista .contenido {
    width: 200px;
    height: 150px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}
.vista img {
	width: 100%;
    display: block;
    position: relative;
}
.vista h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 10px;
    padding: 10px;
  /*  background: hsla(0,0%,0%,0.8); */
	 background: hsla(324, 98%, 47%, 1);
    margin: 20px 0 0 0;
}
.mascaraTitulo {
    color: #fff;
    display: block;
    height: 100px;
    left: 0;
    overflow: hidden;
    position: absolute;
    /* top: 25px; */
    width: 200px;
    z-index: 9;
}
.mascaraTitulo h3 {
   /* background: hsla(0, 0%, 0%, 0.8) none repeat scroll 0 0; */
		background: hsla(183, 100%, 37%, 0.8) none repeat scroll 0 0;
    color: #fff;
    font-size: 14px;
    margin: 40px 0 0;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
	}
.vistaSinImagen h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
   /* background: hsla(0,0%,0%,0.8);*/
	background: hsla(183, 100%, 37%, 0.8);
    margin: 20px 0 0 0;
}
.vista p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}
.vista a {
z-index: 9999999;
font-size: 14px;
font-weight: bold;
}
.vista a:hover { color:#fff }
.vista a.informacion {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
}
.vista a.informacion:hover {
    box-shadow: 0 0 5px #000
}
/******************************************************************************/
/* Estilos para ejemplo 1 */
.vista img {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.vista .mascara {
    opacity: 0;
	background-color:hsla(183, 100%, 37%, 0.7);
   /* background-color: hsla(34,93%,45%,0.7); */
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.vista h2 {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.vista p { 
    opacity: 0;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -o-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.vista a.informacion{
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.vista:hover img { 
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
} 
.vista:hover .mascaraTitulo {
 opacity: 0;
 z-index: 0;
 }
.vista:hover .mascara { 
    opacity: 1;
}
.vista:hover h2,
.vista:hover p,
.vista:hover a.informacion {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.vista:hover p {
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.vista:hover a.informacion {
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}