División publicidad: Efectos / Paso 5.
Paso 5: Asociar el tipo de transición y su duración a cada objeto de manera que responda al evento hover.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paso 5</title>
<style type="text/css">
.publicidad{ /* definir las características de la división que contendrá la publicidad */
margin: 5px 10px;
float: left;
border: none;
position: relative;
text-align: center;
cursor: default;
box-shadow: 1px 1px 3px #000000;
padding: 0px;
border-radius: 5px;
}
.publicidad, .visor, .ver-primero, .mascara{
width: 280px; /* Objetivo: superponer capas */
height: 160px;
border-radius: 5px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
/* Posicionar las capas y agregar la imagen*/
.ver-primero, .mascara{
position: absolute;
top: 0px;
left: 0px;
}
/* Inicializar propiedades de los objetos para la capa visor */
.visor h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 5px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.visor p {
font-style: italic;
font-size: 14px;
font-weight: bold;
position: relative;
color: #fff;
padding: 5px 20px 10px;
text-align: center;
}
/* Agregar la clase información a cada objeto */
.visor a.informacion {
display: block;
width: 120px;
line-height: 25px;
margin: 0px auto;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 2px #000;
}
.visor a.informacion:hover {
box-shadow: 0 0 5px #000;
}
/* Inicializar las propiedaes de la 1er. capa que contendrá la imagen */
.ver-primero img {
display: block;
position: relative;
top: 0px;
left: 0px;
width: 280px;
height: 160px;
border-radius: 5px;
overflow: hidden;
transition: all 0.2s linear; /* Sintaxis --> transition:[Propiedad CSS] [Duración] [Función de Tiempo] [Retardo]; */
}
.mascara{
opacity: 0;
background-color: rgba(255,102,51,0.7);
/* naranja clarorgba(219,127,8, ) ; */
transition: all 0.4s ease-in-out;
border-radius: 5px;
}
/* Asociar la transformación y la transición a cada elemento de la capa que se verá primero */
.ver-primero h2 {
-webkit-transform: translateY(-100px); /* Define la transformación como movimiento usando sólo el valor de y en el eje de las ordenadas */
opacity: 0; /* transparente */
transition: all 0.2s ease-in-out; /* afecta a todas las propiedades / en 2 segundos / efecto o retardo */
}
.ver-primero p {
-webkit-transform: translateY(100px);
opacity: 0; /* transparente */
transition: all 0.2s linear;
}
.ver-primero a.informacion{
opacity: 0; /* transparente */
transition: all 0.2s ease-in-out;
}
/* Programar para cada elemento qué hacer frente al evento onmouseover */
.ver-primero:hover img {
-webkit-transform: scale(3,3); /* Agrandar la imagen 3 veces su ancho y 3 veces su alto */
border-radius: 5px;
}
.ver-primero:hover .mascara {
opacity: 1; /* opaco, sin transparencia */
border-radius: 5px;
}
.ver-primero:hover h2, .ver-primero:hover p, .ver-primero:hover a.informacion {
opacity: 1; /* opaco, sin transparencia */
-webkit-transform: translateY(0px); /* cambiar este valor para ver el efecto */
}
/* Definir el retardo para ver la transformación */
.ver-primero:hover p {
transition-delay: 0.1s;
}
.ver-primero:hover a.informacion {
transition-delay: 0.3s;
}
</style>
</head>
<body>
<div class="publicidad">
<div class="visor ver-primero">
<img src="file:///C|/Escuela2013/Imagenes/PublicidadI.png" />
<div class="mascara">
<h2> nombre empresa </h2>
<p> texto de la oferta </p>
<a class="informacion" href="#"> link </a>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Paso 5</title>
<style type="text/css">
.publicidad{ /* definir las características de la división que contendrá la publicidad */
margin: 5px 10px;
float: left;
border: none;
position: relative;
text-align: center;
cursor: default;
box-shadow: 1px 1px 3px #000000;
padding: 0px;
border-radius: 5px;
}
.publicidad, .visor, .ver-primero, .mascara{
width: 280px; /* Objetivo: superponer capas */
height: 160px;
border-radius: 5px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
/* Posicionar las capas y agregar la imagen*/
.ver-primero, .mascara{
position: absolute;
top: 0px;
left: 0px;
}
/* Inicializar propiedades de los objetos para la capa visor */
.visor h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 5px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.visor p {
font-style: italic;
font-size: 14px;
font-weight: bold;
position: relative;
color: #fff;
padding: 5px 20px 10px;
text-align: center;
}
/* Agregar la clase información a cada objeto */
.visor a.informacion {
display: block;
width: 120px;
line-height: 25px;
margin: 0px auto;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
box-shadow: 0 0 2px #000;
}
.visor a.informacion:hover {
box-shadow: 0 0 5px #000;
}
/* Inicializar las propiedaes de la 1er. capa que contendrá la imagen */
.ver-primero img {
display: block;
position: relative;
top: 0px;
left: 0px;
width: 280px;
height: 160px;
border-radius: 5px;
overflow: hidden;
transition: all 0.2s linear; /* Sintaxis --> transition:[Propiedad CSS] [Duración] [Función de Tiempo] [Retardo]; */
}
.mascara{
opacity: 0;
background-color: rgba(255,102,51,0.7);
/* naranja clarorgba(219,127,8, ) ; */
transition: all 0.4s ease-in-out;
border-radius: 5px;
}
/* Asociar la transformación y la transición a cada elemento de la capa que se verá primero */
.ver-primero h2 {
-webkit-transform: translateY(-100px); /* Define la transformación como movimiento usando sólo el valor de y en el eje de las ordenadas */
opacity: 0; /* transparente */
transition: all 0.2s ease-in-out; /* afecta a todas las propiedades / en 2 segundos / efecto o retardo */
}
.ver-primero p {
-webkit-transform: translateY(100px);
opacity: 0; /* transparente */
transition: all 0.2s linear;
}
.ver-primero a.informacion{
opacity: 0; /* transparente */
transition: all 0.2s ease-in-out;
}
/* Programar para cada elemento qué hacer frente al evento onmouseover */
.ver-primero:hover img {
-webkit-transform: scale(3,3); /* Agrandar la imagen 3 veces su ancho y 3 veces su alto */
border-radius: 5px;
}
.ver-primero:hover .mascara {
opacity: 1; /* opaco, sin transparencia */
border-radius: 5px;
}
.ver-primero:hover h2, .ver-primero:hover p, .ver-primero:hover a.informacion {
opacity: 1; /* opaco, sin transparencia */
-webkit-transform: translateY(0px); /* cambiar este valor para ver el efecto */
}
/* Definir el retardo para ver la transformación */
.ver-primero:hover p {
transition-delay: 0.1s;
}
.ver-primero:hover a.informacion {
transition-delay: 0.3s;
}
</style>
</head>
<body>
<div class="publicidad">
<div class="visor ver-primero">
<img src="file:///C|/Escuela2013/Imagenes/PublicidadI.png" />
<div class="mascara">
<h2> nombre empresa </h2>
<p> texto de la oferta </p>
<a class="informacion" href="#"> link </a>
</div>
</div>
</div>
</body>
</html>
