There is a paragraph that needs to be clipped when hovered over.
An issue arises where the H1 text shifts its position.
Only the phrase "HOVER ABOVE PARAGRAPH" should be concealed.
* {
margin: 0;
box-sizing: border-box;
}
.wrapper {
display: block;
margin: 50px;
width: 200px;
position: relative; /* Ensuring absolute positioning stays within this box */
}
.mouseover-me {
display: block; /* <a> tag has no normal defaults */
height: 55px;
max-height: 55px;
overflow-y: hidden;
z-index: 20;
}
.mouseover-me:hover{
background-color: lightgrey;
z-index: 20;
position: absolute;
max-height: none;
height: auto;
}<div class="wrapper">
<a class="mouseover-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus. Nunc vehicula dapibus sem eget maximus.</a>
<h1 class="override-me">HOVER ABOVE PARAGRAPH TO HIDE THIS TEXT PARTIALLY, BUT KEEP THIS H1 TEXT IN THE SAME POSITION</h1>
</div>