Diferencia entre revisiones de «Pruebas»
Ir a la navegación
Ir a la búsqueda
Sin resumen de edición |
Sin resumen de edición |
||
Línea 1: | Línea 1: | ||
<div | <div class="container"> | ||
<img src="ruta-de-la-imagen" alt="Descripción de la imagen"> | |||
<div class="overlay"> | |||
<table> | |||
</div> | <tr> | ||
<th>Columna 1</th> | |||
<th>Columna 2</th> | |||
</tr> | |||
<tr> | |||
<td>Fila 1, columna 1</td> | |||
<td>Fila 1, columna 2</td> | |||
</tr> | |||
<tr> | |||
<td>Fila 2, columna 1</td> | |||
<td>Fila 2, columna 2</td> | |||
</tr> | |||
</table> | |||
</div> | |||
</div> | </div> | ||
Agrega CSS para ocultar la tabla hasta que se haga mouseover en la imagen y mostrarla encima de la imagen. Por ejemplo: | |||
css | |||
Copy code | |||
.container { | |||
position: relative; | |||
width: 50%; /* ajusta el tamaño según tus necesidades */ | |||
} | |||
.overlay { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
opacity: 0; | |||
transition: .5s ease; | |||
background-color: rgba(255,255,255,0.8); | |||
} | |||
.container:hover .overlay { | |||
opacity: 1; | |||
} | |||
table { | |||
margin-top: 20px; | |||
margin-left: auto; | |||
margin-right: auto; | |||
border-collapse: collapse; | |||
} | |||
th, td { | |||
padding: 10px; | |||
text-align: center; | |||
border: 1px solid black; | |||
} |
Revisión del 23:22 14 abr 2023
<img src="ruta-de-la-imagen" alt="Descripción de la imagen">
Agrega CSS para ocultar la tabla hasta que se haga mouseover en la imagen y mostrarla encima de la imagen. Por ejemplo: css Copy code .container {
position: relative; width: 50%; /* ajusta el tamaño según tus necesidades */
}
.overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: .5s ease; background-color: rgba(255,255,255,0.8);
}
.container:hover .overlay {
opacity: 1;
}
table {
margin-top: 20px; margin-left: auto; margin-right: auto; border-collapse: collapse;
}
th, td {
padding: 10px; text-align: center; border: 1px solid black;
}