I'm working on a design where the title of a text and image box is always visible, but the description should only appear when the user hovers over the box. In addition, I want the title and description to be vertically and horizontally centered at all times, regardless of their length. To achieve this effect, I tried using jQuery to measure the height of the title and description text and adjust the visible area accordingly.
For reference, here is an example of the desired effect: (LIFESTYLE & T.E.C.H sections).
Here is my current code implementation:
$(window).load(function(){
$(".featured-image-box").each(function(){
var original_title_height = $(this).find(".featured-title").height();
var original_description_height = $(this).find(".featured-description").height();
$(this).find(".text-area").css({
height: original_title_height
});
$('.featured-image-box').hover(
function(){
$(this).find(".text-area").css({
height: original_title_height + original_description_height
})
},
function(){
$(this).find(".text-area").css({
height: original_title_height
})
}
);
});
});.featured-images {
.featured-image-box {
background-repeat: no-repeat;
background-size: cover;
height: 30vw;
position: relative;
...
</div>While the current setup partially works, there are issues with the height measurements when hovering over the image and then moving away. Any suggestions or solutions would be greatly appreciated!