1

Estoy tratando de crear un efecto overlay de abajo arriba para una imagen al hacer hover sobre esta y que muestre un texto centrado, pero no lo consigo. Me he informado mucho, he visto muchos tutoriales, pero no lo consigo aplicar, ya que me contenedor de imágenes es flex y necesito crear este efecto. Agradezco toda ayuda. Adjunto mi código html y css

.containerFotos{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: row;
    overflow: hidden;
}


.containerFotos img{
    margin-top: -150px;
    width: 650px;
    height: 400px;
    padding: 100px;
    z-index: 0;
}

.comida{
    position: absolute;
    left: 7.9%;
    background-color: red;
    width: 34.2%;
    text-align: center;
    top: 184%;
    z-index: 3;
}

.comida:hover .overlay{
   background-color: yellow;
   /*height: 100px;*/
}

.overlay{
    transition: height 10s;
    background-color:rgba(43, 34, 68, 0.9);
}

.overlay:hover{
    height: 20em;
}
<div class="containerFotos">
		<img src="../img/descarga.jpg" />

	    <div class="comida">
	       <div class="overlay">
	       		<p> prueba </p>
	       	</div>	
	    </div>			
			
		
		<img src="../img/MATUMBO-STEW-800x510.jpg"/>
		<img src="../img/IMG_20170817_151825_mini-1024x576.jpg"/>
		<img src="../img/150304102311-irio-cnn-super-169-1024x576.jpg"/>
		<img  src="../img/maharagwe-poa-pinterest-1024x538.jpg"/>
		<img src="../img/tanzaniasafariprivatetours_wali-wa-nazi_riso-al-cocco-1024x629.jpg"/>
		
	</div>

1 respuesta 1

0

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>

9
  • Gracias por tu respuesta. Es justo lo que quiero, pero se me desestructura toda la página, añado imagen como respuesta.
    – scorpions
    Commented el 14 may. 2019 a las 11:40
  • ![introducir la descripción de la imagen aquí](i.sstatic.net/ibCY1.gif) como se puede ver en la imagen, ya no ha respetado en contenedor flex, el texto se ha ido de sitio y demás
    – scorpions
    Commented el 14 may. 2019 a las 11:43
  • esto pasa porque tus imágenes son muy grandes mientras que las mias son pequeñas. Si tus imágenes son tan grandes porque necesitas utilizar display: flex; flex-wrap: wrap; justify-content: space-around; flex-direction: row;?
    – enxaneta
    Commented el 14 may. 2019 a las 12:02
  • porque las quiero en columnas, dos columnas y cuando cambie de resolución pues hagan el salto
    – scorpions
    Commented el 14 may. 2019 a las 14:40
  • 1
    Mil gracias @enxanta oajalá llegue a los niveles de conocimiento que hay en esta grandísima web, ayudáis a muchísima gente!!!! Gracias de nuevo compañero
    – scorpions
    Commented el 14 may. 2019 a las 17:56

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.