0

Espero darme a entender...

A unas imágenes les agregué :hover con parámetro opacity: 60%. Por otra parte, el header donde tengo el menú superior, tiene el parámetro position: fixed.

Cuando doy scroll hacia abajo con el mouse y dejo una parte de la imagen debajo del header, el header oculta esa parte de la imagen, es como si esa parte de la imagen quedara debajo del header, hasta ahí todo bien.

El problema es cuando paso el mouse por encima de esa imagen que se muestra incompleta, se activa el hover, haciendo que toda la imagen se vea. La parte de la imagen que cubría el header, ahora se ve encima de este, y eso se ve muy mal.

¿Cómo sería posible que aunque pasara el mouse encima de la imagen, sólo se aplicara el hover a la parte de la imagen que es visible?

Anexo imagenes.

introducir la descripción de la imagen aquí

2
  • 2
    Seria de gran ayuda ver el código CSS y HTML para poder ayudarte mejor en vez de imágenes.
    – Alvarez
    Commented el 24 feb. 2020 a las 2:32
  • 1
    Hola @0M1N1D0, como dice Luis Fernando. Debes proporcionar tu código para que nosotros podamos revisarlo e indicarte dónde se encontraba el problema Hasta el momento, de acuerdo a lo que has descrito, apunta a que tienes la propiedad z-index en tu selector .selector:hover { z-index: _valor_ }. Por ahora, podríamos suponer eso, pero necesitamos el código para ayudarte. Recuerda consultar Cómo crear un ejemplo mínimo, completo y verificable.. Commented el 24 feb. 2020 a las 7:46

1 respuesta 1

0

Agregar el z-index: 2 /* AL HEADER */ Agrega el z-index: 1 /* A LA IMAGEN :HOVER */

Si te sigue ocurriendo lo mismo agregar Position:relative /* A LA IMAGEN */

2
  • Pon el código css html para poder ayudarte
    – Janpweb
    Commented el 25 feb. 2020 a las 1:32
  • Yo intentaría usar el clear: both; para limpiar el flotado si es eso que lo deseas
    – Janpweb
    Commented el 25 feb. 2020 a las 1:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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