html - 悬停时的 slider 不与文本重叠

Question

我确信这是一个简单的修复，但我是 HTML/CSS 的新手 - 我想要一个 div 中的一段文本滑过另一个包含图像和文本的 div。目前 slider div 没有覆盖整个 div，因为背景文本阻止它这样做。我怎样才能让它完全重叠？

这是我的代码:

.items-tall {
	background-color: #F473FF;
	height: 450px;
	overflow: hidden;
}

.items-tall-slider {
	background-color: black;
	height: 450px;
	width: 100%;	
	margin-left: -100%;
	transition: 0.5s;
	color: white;
	font-size: 60px;
	text-align: center;
	line-height: 450px;
}

.items-tall:hover .items-tall-slider {
	margin-left: 0%;
	transition: 0.5s;	
}

<div class="row">

<div class="col-4 col-m-6 items-tall">  
This is my title.<br> I currently want all this text behind the slider. Hover over this. 
  
<div class="items-tall-slider"> Sliding info.  </div>

</div>
  
 

Answer 1

将此添加到您的 .items-tall-slider :

  position:absolute;
  top:0;

这个用于定位:

.row {
  position:relative;
}

.items-tall {
	background-color: #F473FF;
	height: 450px;
	overflow: hidden;
}

.items-tall-slider {
	background-color: black;
	height: 450px;
	width: 100%;	
	margin-left: -100%;
	transition: 0.5s;
	color: white;
	font-size: 60px;
	text-align: center;
	line-height: 450px;
  position:absolute;
  top:0;
}

.items-tall:hover .items-tall-slider {
	margin-left: 0%;
	transition: 0.5s;	
}

.row {
  position:relative;
}

<div class="row">

  <div class="col-4 col-m-6 items-tall">  
    This is my title.<br> 
    I currently want all this text behind the slider. Hover over this. 

    <div class="items-tall-slider"> 
      Sliding info.  
    </div>
  </div>

</div>

你还错过了一个</div>结束标签。我在这个例子中添加了它。