Sliding box on mouse over - CSS - css

Question

I'ld like to know if there is a better way to do this:
Also I don't think it will work smoothly in a responsive page so do you have any ideas to make it work without certain positionings like 'bottom:-45px;'.
I just wondered about this so this is not something that I'm going to use somewhere.
I know it could be done with jquery easily but I wonder if there is a chance to achieve this effect with pure CSS
.d1 {
width: 320px;
border: none;
padding: 10px;
margin: 10px 0px;position: relative;
}
.d2 {
width: 70%;
position: relative;
left: 0px;
right: 0px;
padding: 20px 0px;
margin: 10px 0px;
border: none;
}
.d3 {
width: 90%;position: relative;
left: 0px;
margin: 20px 0px;
padding: 20px 0px;
right: 0px;
border: none;
}
.d3 p, .d2 p, d1 p {
z-index:999;
position:relative;
}
.hov {
width: 40%;
padding: 20px 10px;
background-color: #300;
position:relative;
opacity:0;
bottom:-45px;left:0px;
z-index:0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}
.d2 { pointer-events: none;}
.d3 { pointer-events: auto;}
.d2:hover .hov{
opacity:1;
bottom:-123px;
}
.d1:hover .hov{
opacity:1;
}
<div class="d1">
div1
<div class="d2">
<div class="hov" id="hov">
</div>
<p>
div2
</p>
<div class="d3">
<p>
div3</p>
</div>
</div>
</div>

Answer 1

Actually I think I managed to do it. In this case there are two elements so I placed them to top and bottom of the main container.
.d1 {
width: 320px;
padding: 10px;
margin: 10px;
position: relative;
cursor: default;
}
.d2 {
position: relative;
margin-top: -15px;
margin-bottom: 60px;
}
.d3 {
position: relative;
margin-bottom: -15px;
}
.d3 p,
.d2 p {
z-index: 999;
position: relative;
}
.hov {
width: 40%;
height: 40%;
background-color: #300;
position: absolute;
opacity: 0;
top: 0%;
left: 0px;
z-index: 0;
transition: all 0.3s cubic-bezier(0.175, 1.285, 0.32, 1.275);
}
.d3:hover+.hov {
top: 60%;
}
.d1:hover .hov {
opacity: 1;
}
<div class="d1">
<div class="d2">
<p> div2 </p>
</div>
<div class="d3">
<p> div3 </p>
</div>
<div class="hov"></div>
</div>

Answer 2

Generally, what you would call a 'certain positioning' would be required, but if you were to run it with a responsive page, the user, with a mobile phone, would have to click the area, before it moves, instead of hovering it. Using pure CSS would be a drag, because you have to literally loop over the codes all around.
My advice is, it's generally okay to use a specific number (i.e. -45px) as long as it's only for vertical measurements.