CSS - Hover sobre una fila de tabla o grid para mostrar una imagen.

Pos: 92

Val: 8

Hover sobre una fila de tabla o grid para mostrar una imagen.

Publicado por Gdl (3 intervenciones) el 01/10/2020 16:15:00

Hola, estoy haciendo una página web desde un builder y quiero conseguir hacer una tabla (sin encabezado) de manera que al posicionarse sobre cada una de las filas se muestre una imagen diferente. Véase una tabla de tres columnas:

01 Francia 2020
02 Italia 1995
03 España 1780

y cada una de las filas muestre una imagen de cada país, es decir, el hover funcionaría sobre la fila.

Si pudieran poner el hltm y css de cómo hago la tabla y la función, pls.
Gracias de antemano!

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 1

Val: 870

Hover sobre una fila de tabla o grid para mostrar una imagen.

Publicado por joel (252 intervenciones) el 02/10/2020 08:22:05

No me queda muy claro... quieres que al pasar el ratón por encima la fila de una tabla se muestre una imagen? donde se encuentra esa imagen? esta en un div oculto? o hay que cargarla del servidor?

Si nos puedes comentar con mas detalle

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 92

Val: 8

Hover sobre una fila de tabla o grid para mostrar una imagen.

Publicado por Gdl (3 intervenciones) el 02/10/2020 10:09:38

Estoy construyendo la web desde un builder al que hay que subir las imágenes.

Te muestro cómo he conseguido hacer la función hover en un texto independiente:
https://support.cargo.site/Show-an-Image-on-Hover

A la hora de convertir ese texto en un grid pierde la función hover:

<div grid-row="" grid-pad="0" grid-gutter="0">

<div grid-col="x10" grid-pad="0"><div style="text-align: center;"><h1>1990</h1></div></div>

<div grid-col="x10" grid-pad="0"><h1>Italy</h1></div>

<div grid-col="x10" grid-pad="0"><h1>2010</h1></div>

Yo quiero poner varios grid, uno debajo de otro, de manera que cada uno funcione independientemente como un hover que muestre una imagen previamente cargada en el builder. Sería algo así como una tabla de tres columnas sin encabezado donde cada fila muestra una imagen diferente.

Te paso algunos ejemplos similares:
https://emilievizcano.com/
http://www.moaa.co.nz/

Valora esta respuesta

Comentar

Pos: 92

Val: 8

Hover sobre una fila de tabla o grid para mostrar una imagen.

Publicado por Gdl (3 intervenciones) el 02/10/2020 10:59:03

Aquí dejo una respuesta más visual a lo que quiero hacer. Los bordes azules son solo una guía para mostrar el grid y el rectángulo rojo únicamente muestra el área de acción del hover.
Un saludo, gracias de antemano

Valora esta respuesta

Comentar

Pos: 1

Val: 870

Hover sobre una fila de tabla o grid para mostrar una imagen.

Publicado por joel (252 intervenciones) el 02/10/2020 20:43:47

Aquí tienes un simple ejemplo:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Engranaje rodando</title>

    <style>

        .block {

            clear:both;

            overflow:hidden;

        .block:hover {

            border:1px solid red;

        .block>div{

            float:left;

            margin-right:20px;

    </style>

</head>

<body>

    <div class='block'>

        <div>01</div>

        <div>France</div>

        <div>1990</div>

    </div>

    <div class='block'>

        <div>02</div>

        <div>Italy</div>

        <div>2010</div>

    </div>

</body>

</html>

Valora esta respuesta

Comentar

Selectores de atributo.

Problema con margenes