Espero que esto sea lo que necesites.
La estructura de cada tarjeta es esta:
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg"/>
<div class="overlay">
<p>prueba </p>
</div>
</div>
Donde primero viene la imagen y después el "overlay" Tanto la imagen como el overlay tienen position:absolute;
para que se sobrepongan en el momento en qual top:0; left:0;
. También quiero que el div .comida
tenga overflow: hidden;
: lo que sobresale no se ve.
Al cargarse la pagina el overlay
tiene top:100% y queda completamente fuera del contenedor .comida
Al pasar con el ratón por encima del contenedor .comida
el .overlay
pasa a tener top:0
, y para que el cambio no sea brusco le puse transition:top 1s;
.containerFotos {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row;
}
.comida {
width: 130px;
height: 80px;
position: relative;
border: 1px solid;
overflow: hidden;
margin:1em;
}
img,
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.overlay {
width: 100%;
height: 100%;
background: rgba(0, 100, 150, 0.3);
top:100%;
transition:top 1s;
}
.comida:hover .overlay{
top:0%;
}
.overlay p {
text-align: center;
line-height:40px;
}
<div class="containerFotos">
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg"/>
<div class="overlay">
<p>prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg"/>
<div class="overlay">
<p>prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg"/>
<div class="overlay">
<p>prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg"/>
<div class="overlay">
<p>prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg"/>
<div class="overlay">
<p>prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg"/>
<div class="overlay">
<p>prueba </p>
</div>
</div>
</div>
Actualización
Después de varios comentarios y después de ver en codepen un ejemplo funcional he llegado a esta versión:
.containerFotos {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row;
}
.comida {
width: 650px;
height: 400px;
position: relative;
overflow: hidden;
margin: 1em;
overflow: hidden;
}
img {
width: 100%;
height:100%;
}
.overlay {
width: 100%;
height: 400px;
position: absolute;
background: rgba(0, 100, 150, 0.3);
position: absolute;
left: 0;
top: 85%;
/*transform: translate(-50px, 0);
-webkit-transform: translate(0,-350px);
-o-transform: translate(0,-350px);
-moz-transform: translate(0,-350px);*/
transition: 1s;
}
.comida:hover .overlay {
top: 0%;
}
.overlay p {
text-align: center;
line-height: 40px;
margin-top: 2%;
}
<div class="containerFotos">
<div class="comida">
<img src="https://via.placeholder.com/650x400.jpg" />
<div class="overlay">
<p> prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/800x510.jpg"/>
<div class="overlay">
<p> prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/1024x576.jpg"/>
<div class="overlay">
<p> prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/1024x576.jpg"/>
<div class="overlay">
<p> prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/1024x538.jpg"/>
<div class="overlay">
<p> prueba </p>
</div>
</div>
<div class="comida">
<img src="https://via.placeholder.com/1024x629.jpg"/>
<div class="overlay">
<p> prueba </p>
</div>
</div>
</div>