Chrome:
IE:
No mozila:
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 »</a></p>
</li>
</ul>
</aside>
</body>
</html>