<div class="item__list">
<div class="item__wrapper">
<div class="item">
<div class="item__image"></div>
<div class="item__title">
Текст
</div>
<div class="item__hidden_text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, maiores.
</div>
</div>
</div>
<div class="item__wrapper">
<div class="item">
<div class="item__image"></div>
<div class="item__title">
Текст
</div>
<div class="item__hidden_text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, maiores.
</div>
</div>
</div>
<div class="item__wrapper">
<div class="item">
<div class="item__image"></div>
<div class="item__title">
Текст
</div>
<div class="item__hidden_text">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum, maiores.
</div>
</div>
</div>
</div>
<div class="row">fdsf</div>
.item__wrapper{
position: relative;
max-width: 150px;
width: 100%;
height: 115px;
}
.item__image{
width: 75px;
height: 75px;
background: red;
margin: 0 auto;
}
.item__title,
.item__hidden_text{
text-align: center;
}
.item__hidden_text{
display: none;
}
.item{
background: pink;
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
max-width: 150px;
width: 100%;
}
/* .item:hover .item__hidden_text{
display: block;
} */
.item__list{
display: flex;
width: 100%;
flex-wrap: wrap;
}
.row{
background: #000;
height: 100px;
}
$('.item').hover(
function(){
$(this).find('.item__hidden_text').show(500);
},
function(){
$(this).find('.item__hidden_text').hide(500);
},
)
This Pen doesn't use any external CSS resources.