Slider on hover not overlapping text - html

Question

I'm sure this is an easy fix but I am new to HTML/CSS - I want a piece of text in a div to slide over another div which contains an image as well as text. Currently the slider div is not covering the entire div as the background text is preventing it from doing that. How do I make it completely overlap?
Here is my code:
.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

Add this to your .items-tall-slider:
position:absolute;
top:0;
and this for positioning:
.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>
You also missed one </div> closing tag. I've added that in this example.

Answer 2

In your example the easiest solution would be to add position: absolute; top: 0 to the .items-tall-slider. This has the potential undesired side effect though, that the slider doesn't take any space anymore. Therefore any other elements in your page could be overlapped by your slider as well.
If you don't want this side effect, you could add a negative margin to your slider like this (or in the example below) and therfore overlap your text:
.items-tall-slider {
margin-top: -40px;
}
.items-tall-slider {
margin-top: -40px;
}
.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>