Home / Questions / 263385
Accepted
scorpions
Asked: 2020-05-15 02:37:26 +0800 CST 2020-05-15 02:37:26 +0800 CST

trying to overlay an image

  • 772

I'm trying to create a bottom-up overlay effect for an image by hovering over it and displaying centered text, but I can't. I have read a lot, I have seen many tutorials, but I cannot apply it, since my image container is flex and I need to create this effect. I appreciate all help. I attach my html and css code

.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>

html

1 Answers

  1. Best Answer

    I hope this is what you need.

    The structure of each card is this:

          <div class="comida">
      <img src="https://via.placeholder.com/650x400.jpg"/>
           <div class="overlay">
                <p>prueba </p>
            </div>  
      </div>

    Where the image comes first and then the "overlay" Both the image and the overlay have position:absolute;to overlap at the time qual top:0; left:0;. I also want the div .comidato have overflow: hidden;: what sticks out is not visible.

    When the page is loaded overlayit has top:100% and is completely out of the container.comida

    When passing with the mouse over the container .comidait .overlayhappens to have top:0, and so that the change is not abrupt I puttransition: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>

    Update

    After several comments and after seeing a working example in codepen I have arrived at this version:

    .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>

    • 0