I don’t know how to formulate my question, thats why I included this gif.
Is it possible to some how make the text overflow only when the mouse is inside the white rectangles borders?
I think that when the text pops up, it has a rectangular box surrounding it and it blocks the element underneath it.
Is there a way around this?
Thats the CSS code that I am using.
.flex-container
{
width: 1000px;
height: 80px;
margin: 100px auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.item-1
{
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 80px;
background-color: white;
transition: 1000ms;
overflow: hidden;
}
#full
{
background-color: darkred;
transition: 1000ms;
}
#full:hover
{
background-color: white;
transition: 1000ms;
}
.item-1:hover
{
position: relative;
height: 45px;
transition: 100ms;
overflow: visible;
}
.item-1 p
{
visibility: hidden;
opacity: 0;
font-size: 60px;
font-family: 'Times New Roman', Times, serif;
color: darkred;
}
.item-1:hover p
{
visibility: visible;
opacity: 1;
transition: 300ms;
}