División publicidad: Efectos / Paso 2.
Paso 2: superponer las capas en un mismo espacio ( división publicidad).
<!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 2</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; /*Ocultar desbordamiento */
color: #0F0;
}
/*----------------------------------------------------------------------------------------
/* Posicionar las capas una sobre otra*/
.ver-primero, .mascara{
position: absolute;
top: 0px;
left: 0px;
}
</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 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 2</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; /*Ocultar desbordamiento */
color: #0F0;
}
/*----------------------------------------------------------------------------------------
/* Posicionar las capas una sobre otra*/
.ver-primero, .mascara{
position: absolute;
top: 0px;
left: 0px;
}
</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 href="#"> link </a>
</div>
</div>
</div>
</body>
</html>
