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

试图覆盖图像

  • 772

我正在尝试通过将鼠标悬停在图像上并显示居中文本来为图像创建自下而上的叠加效果，但我做不到。我读了很多，我看过很多教程，但我不能应用它，因为我的图像容器是弹性的，我需要创建这个效果。我感谢所有帮助。我附上我的 html 和 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>

html

1 Answers

  1. Best Answer

    我希望这是你需要的。

    每张卡的结构是这样的：

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

    图像首先出现的位置，然后是“叠加层”图像和叠加层都position:absolute;必须在时间 qual 重叠top:0; left:0;。我也希望 div.comida有overflow: hidden;：突出的东西是不可见的。

    加载页面时，overlay它具有 top:100% 并且完全不在容器中.comida

    当将鼠标移到.comida它.overlay恰好有的容器上时top:0，因此我放的更改不会突然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>

    更新

    经过几条评论并在 codepen 中看到一个工作示例后，我得到了这个版本：

    .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