I've encountered an issue on small devices with the Bootstrap card. I'm using a hover effect to slide up the content, but on small devices, the content is cutting off the image. I'm not sure how to position the content directly after the image using position: absolute. I only want to display the name and the title initially, and then reveal the rest of the content with a slide up effect on hover.
.team-card {
border:0!important;
border-radius:5px!important;
overflow:hidden!important;
}
.team-card .card-body .card-title,.team-card .card-body .card-text {
text-align:center;
margin:0;
}
.team-card .card-body {
position:absolute;
width:100%;
height:100%;
left:0;
top:255px;
background-color:#fff;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
-webkit-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}
.team-card .card-body p {
line-height:1.6em;
}
.team-card:hover .card-body {
top:0;
}
.team-card .card-body .card-text {
margin-bottom:15px;
}
<html>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="card team-card">
<img src="https://png.pngtree.com/png-vector/20190704/ourlarge/pngtree-vector-user-young-boy-avatar-icon-png-image_1538408.jpg" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<p class="card-text">Business Director</p>
<p>Board member (core-team) previous Director-Business Development at EM6 and earlier at Syncada.</p>
</div>
</div>
</body>
</htmlThank you for your assistance.