|
|
| Línea 1: |
Línea 1: |
| <div class="container">
| |
| <img src="ruta-de-la-imagen" alt="Descripción de la imagen">
| |
| <div class="overlay">
| |
| <table>
| |
| <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>
| |
| 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;
| |
| }
| |