1

Soy nuevo en esto de html y css, estoy aprendiendo, y tengo una duda... tengo una lista de platos de comidas, y quería que al hacer click o hover en el nombre muestre la imagen del plato, intenté con esto pero no me salió, probando el display none y block me abre el contenedor pero no me muestra la imagen:

   
	<section id="sopas">
	    
		    <h2>Sopas</h2>
		        <ul>
			        <li id="mani"><span>Sopa de mani<img id="img" src="imagenes/sopamani.jpg" alt="sopa mani"></span></li>
			        <li id="chairo"><span>Chairo $100</span></li>
			        <li id="fideo"><span>Fideo $100</span></li>
            </ul>
	</section>

</body>
</html>

   
#mani img{
    display: none;
}
#mani span:hover{
    display: block;
    font-family: sans-serif;
    color: white;
    font-size: 40px;
    height: 500px;
    transition: border 1s;
    display: block;
    border: 5px solid black;
    
}
.precio{
    font-weight: bold;
    color:green;
}

2
  • ¿Que la muestre a lado de la imagen, en un modal o cómo?
    – BetaM
    el 14 mar. 2020 a las 23:04
  • Hola, que la imagen me muestre detras del nombre como un background o debajo... me es indiferente en ese caso
    – Sergio
    el 14 mar. 2020 a las 23:11

1 respuesta 1

0

Realiza los siguientes pasos:

  • No uses la etiqueta img para tener las imágenes que planeas mostrar u ocultar, para evitar el uso de display con sus valores none y block
  • Agrega la imagen por medio de la propiedad background-image
  • Establece un alto y un ancho a cada uno de los li ya que al ser un elemento inline no poseen mas que el espacio que da el texto que contienen y eso evitaría que se note la imagen como fondo
  • Si tratas de mostrar imágenes distintas por cada uno de los li te puedes valer de la regla CSS nth-child() indicando en los paréntesis el número del elemento al cual le deseas aplicar el fondo personalizado
  • Usa background-size con el valor cover para lograr que la imagen se ajuste y cubra el espacio del elemento que la esta conteniendo

Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        li.menu-principal--contenedor-elemento {
          width: 200px;
          height: 200px;
          border: 1px solid;
        }
        .menu-principal--contenedor-elemento:nth-child(1):hover {
          background-image: url(https://placekitten.com/500/500);
          background-size: cover;
        }
        .menu-principal--contenedor-elemento:nth-child(2):hover {
          background-image: url(https://placekitten.com/500/500);
          background-size: cover;
        }
        .menu-principal--contenedor-elemento:nth-child(3):hover {
          background-image: url(https://placekitten.com/500/500);
          background-size: cover;
        }
      </style>
    </head>
    <body>
    <main>
      <nav class="menu-principal">
        <ul class="menu-principal--contenedor">
          <li class="menu-principal--contenedor-elemento">
            El platillo 1
          </li>
          <li class="menu-principal--contenedor-elemento">
            El platillo 2
          </li>
          <li class="menu-principal--contenedor-elemento">
            El platillo 3
          </li>
        </ul>
      </nav>
    </main>
    </body>
    </html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.