0

Chrome:

inserir a descrição da imagem aqui

IE:

inserir a descrição da imagem aqui

No mozila:

inserir a descrição da imagem aqui

O certo seria ficar como esta no Mozilla. No chrome e no IE ele não esta certo.

Eu coloquei o texto em cima da imagem usando esse script:

CSS:

.img-containerAside{
    width: 359px;
    height: 184px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;

}

 .img-containerAside img{
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .7s ease;
   transition: -webkit-transform .7s ease;
   -o-transition: transform .7s ease;
   transition: transform .7s ease;
   transition: transform .7s ease, -webkit-transform .7s ease;

}

.img-containerAside:hover img{
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
      transform: scale(1.1);
}    

.indexDivImagemAside{
    width: 359px;
    height: 184px;
}

 ul.noticiasIndex li h4{
  font-weight: 800;
  position: absolute;
}

HTML:

<!DOCTYPE html>
<html>
<head>
   <title>sas</title>
   <link rel="stylesheet" type="text/css" href="sis.css">
   <style type="text/css">
   </style>
</head>
<body>
   <aside>

    <ul class="noticiasIndex">
        <li>
            <div class="img-containerAside">
                <div class="indexDivImagemAside">
                    <a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html"><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="esqueleto.html"></a>
                </div>

                <h4><a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html">Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia</a></h4>
            </div>

                <p>Os arqueólogos acreditam que o homem estava fugindo das lavas do vulcão em busca de um lugar seguro, ele conseguiu escap...<a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html" id="continuelendo">Continue lendo &raquo;</a></p>

       </li>
    </ul>
</aside>
</body>
</html>
2
  • tenta montar um snippet aqui, ou no codepen.io para ficar mais fácil de visualizarmos o problema Commented 23/08/2018 às 21:18
  • @RicardoPontual Eu atualizei o script. Se vc vizualizar esse script no mozilla, chrome e IE, vai ver que o texto muda de posiçao em cada um. O certo seria fica como esta no Mozilla.
    – jim
    Commented 23/08/2018 às 21:35

1 Resposta 1

1

O que está faltando é um position: relative na div que abriga o texto. Para usar position: absolute, a div pai deve ter alguma position que não seja static, que é o padrão (CSS position).

Também é preciso especificar as propriedades do posicionamento (left, ou right, ou top ou bottom). No seu caso me parece ser left e bottom.

Exemplo:

.img-containerAside{
    width: 359px;
    height: 184px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        position: relative; /* propriedade adicionada */
        background-color: yellow; /* propriedade de exemplo */

}

 .img-containerAside img{
   width: 100%;
   height: 100%;
   -webkit-transition: -webkit-transform .7s ease;
   transition: -webkit-transform .7s ease;
   -o-transition: transform .7s ease;
   transition: transform .7s ease;
   transition: transform .7s ease, -webkit-transform .7s ease;

}

.img-containerAside:hover img{
   -webkit-transform: scale(1.1);
   -ms-transform: scale(1.1);
      transform: scale(1.1);
}    

.indexDivImagemAside{
    width: 359px;
    height: 184px;
}

 ul.noticiasIndex li h4{
  font-weight: 800;
  position: absolute;
  left: 0; /* propriedade adicionada */
  bottom: 0; /* propriedade adicionada */
}
<aside>

    <ul class="noticiasIndex">
        <li>
            <div class="img-containerAside">
                <div class="indexDivImagemAside">
                    <a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html"><img src="http://tvcultura.com.br/upload/tvcultura/programas/programa-imagem-som.jpg" alt="esqueleto.html"></a>
                </div>

                <h4><a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html">Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia</a></h4>
            </div>

                <p>Os arqueólogos acreditam que o homem estava fugindo das lavas do vulcão em busca de um lugar seguro, ele conseguiu escap...<a href="posts/Esqueleto do homen mais azarado do mundo foi encontrado em Pompéia.html" id="continuelendo">Continue lendo &raquo;</a></p>

       </li>
    </ul>
</aside>

1
  • @Perfeito. Muito obrigado!
    – jim
    Commented 23/08/2018 às 21:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .