If there's a more efficient method for accomplishing what I'm about to inquire about, please inform me. So far, this is the best solution I could devise.
I am looking to have a series of divs that enclose a sliding div within them. The sliding divs will feature content extracted from the most recent post, potentially resulting in varying heights.
The initial display should show the title only and reveal the entire div upon hovering over the parent element.
Using only the bottom position poses an issue when the screen width becomes too narrow as more than just the title becomes visible. Although utilizing the top position sacrifices some of the title display, I am willing to compromise on that front.
To address this challenge, I opted to incorporate both top and bottom positions, toggling the placement of 'auto' to reveal the complete div. I do not want the sliding div to match the height of the container div.
However, integrating these changes seems to hinder the transition effect. I attempted incorporating top, bottom, and all in the transitions, yet encountered the same lack of transition effect.
Could someone kindly clarify a) why this approach is ineffective b) provide alternative solutions without resorting to jQuery?
HTML:
<div class="innerLeftPosts">
<div class="mainPostHome">
<div class="postSlideCover">
<h3>Hello this is a test</h3>
<p>This is some test content that would go in here and take up some space</p>
</div>
</div>
<div class="secondaryPostHome">
<div class="postSlideCover">
<h3>Hello this is a test</h3>
<p>This is some test content that would go in here and take up some space</p>
</div>
</div>
</div>
CSS:
.postSlideCover{
width:calc(100% - 20px);
height:auto;
position:absolute;
transition:all 0.4s ease-out;
-webkit-transition:all 0.4s ease-out;
}
.mainPostHome .postSlideCover{
top:83%;
bottom:auto;
}
.mainPostHome:hover .postSlideCover{
top:auto;
bottom:0;
}
Fiddle for full and visual example: https://jsfiddle.net/60nxpfs8/