How can I offset a block with a title and description above a picture by the height of the description content? See the example picture below:
https://i.sstatic.net/DzcMo.png
The goal is to have both titles visible by default, but when hovering over the block, the description should slide up. However, since the length of the content may vary, determining the exact height of the slide is challenging. Even using JavaScript on page load doesn't provide the correct offset due to font loading timing issues.
To address this issue, I attempted to separate the upper and lower content in the HTML:
<div style="background-image: url(https://via.placeholder.com/175x175)">
<div class="wrapper">
<div class="team-meta">
<div class="block-title"><p>TITLE PRESIDENT</p></div>
<div class="team-name">TITLE PRESIDENT</div>
</div>
<div class="team-description">On Hover, darken overlay and add a brief one sentence description of the person if desired.</div>
</div>
</div>
I then applied these styles:
.team-meta {
position: absolute;
bottom: 0; /*always at the very bottom of the block*/
}
.team-description {
position: absolute;
top: 100%; /*always right below the block*/
}
While this approach hides the description by default, it complicates displaying it on hover as manual calculations are required for positioning.
For description: top: [height of parent] - [height of the description]
For title: bottom: [height of the description]
This method is inconvenient and requires a lot of steps. As a result, I tried utilizing code that ended up causing more problems:
document.querySelectorAll('.team-container').forEach((e) => {
anime({
targets: e.querySelector(".team-description"),
top: e.querySelector('.wrapper').offsetHeight - e.querySelector('.team-description').offsetHeight + "px"
});
anime({
targets: e.querySelector(".team-meta"),
bottom: e.querySelector('.team-description').offsetHeight + "px"
});
});The issue with this code arises from incorrect conversion of values during animation, resulting in unexpected behavior. The block seems to transition from the top instead of the intended bottom alignment.
A solution to this problem may exist, but I haven't found it yet.