1

Tengo una imagen que encima tengo que ponerle un texto, pero esa imagen al pasar por encima tiene que volverse gris. Pero ahora mismo al pasar por encima funciona bien, pero el texto sale invisible hasta pasar por encima.

Al texto no debería afectarle el filtro pero no se como hacerlo.

Ahora mismo sale la imagen que se cambia de color (perfecto) Luego el texto si paso por encima de la imagen se ve perfecto, pero tendría que verse también al no pasar por encima.

Podéis ayudarme?

Adjunto código.

.Edificios {
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 5px;
    color: red;
}


.texto{
    position: absolute;
    top: 85%;
    left: 10%;
    color: red;
    background-color: white;
    padding-left: 10px;
    width: 300px;
}

.texto:hover{
    position: absolute;
    top: 80%;
    left: 30%;
    color: white;
    background-color: pink;

}

.container {
    padding-left: 5%;
    padding-right: 5%;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr;
    grid-gap: 20px;
}


.responsive {
  max-width: 100%;
  height: auto;
  display: block;
  width: 35em;
  margin: 0 auto 0 auto;
filter: grayscale(100%);
}

.responsive:hover{
    filter:none;
}
          <div class="containerSingulares">
            <figure class="Edificios">
              <div class="texto">holi</div>

              <img src="https://loremflickr.com/320/240/dog" class="responsive">


            </figure>
            <figure class="Edificios">
              <img src="https://loremflickr.com/320/240/cat" alt="Imagen carrer carme" class="responsive">
            </figure>

            <figure class="Edificios">
              <img src="https://loremflickr.com/320/240/meat" alt="Imagen de la fabrica" class="responsive">
            </figure>

            <figure class="Edificios">
              <img src="https://loremflickr.com/320/240/car" alt="Imagen de palo alto edificio" class="responsive">
            </figure>

            <figure class="Edificios">
              <img src="https://loremflickr.com/320/240/falcon" alt="Imagen del pavellon república" class="responsive">
            </figure>

            <figure class="Edificios">
              <img src="https://loremflickr.com/320/240/star" alt="Imagen del SERT" class="responsive">
            </figure>

3
  • 1
    si le das z-index al texto y position relative al padre del texto osea edificios se te acomoda visible , despues no entendi bien lo de los hovers porque ahi te funcionaria el 11 dic. 2020 a las 12:09
  • 1
    Coloca una imágen en línea como ejemplo en el código para que podamos ver mejor el funcionamiento
    – Elboy
    el 11 dic. 2020 a las 15:20
  • 1
    Primero debes definir, a que imagen le pones que texto, ahora mismo veo que tu texto flota por encima de todo, sin importar el tamaño de las imagenes ni nada.
    – Excorpion
    el 11 dic. 2020 a las 16:17

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.