Whenever I hover over the first div to reveal the entire text, the second div's position shifts to go behind it. My goal is to have the second div stay in place, allowing the text from the first div to overlap it.
Check out the demo here: https://codepen.io/adivity/pen/OJEzoPm
<html>
<body>
<div class="container">
<div>1) This is the complete title that I want to reveal. It's very long and will completely cover the next div.
</div>
<div>2) This is the complete title that I want to reveal. It's very long and will completely cover the next div.
</div>
<div>3) This is the complete title that I want to reveal. It's very long and will completely cover the next div.
</div>
</div>
</body>
</html>
.container {
max-width: 100px;
margin: 0 auto;
}
.container div {
height: 80px;
background-color: grey;
}
.container div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container div:hover {
overflow: visible;
white-space: normal;
z-index: 2;
max-width: 100px;
}