jQuery show description div on box hover, moving title up and down

Question

I have a box of text and image, where I have title shown all the time, but the description needs to appear only when user hovers over the box, which should move the title up and return back to the original state when hover out.

What I want is to make sure text within box stays always vertically and horizontally center aligned, no matter how long is the description text or title. So I was trying to use jQuery to measure the height of title and measure the heigh of the description text to then use those numbers to increase/decrease the visible area (where text is shown).

Here is the example of the effect I want to achieve: https://www.melinbrand.com/ (LIFESTYLE & TECH) sections.

Here is my code:

 $(window).load(function(){ // GET HEIGHT ON LOAD $(".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; @include at-query($max, $small) { height: 50vw; } .text-area { position: absolute; left: 50%; top: 50%; text-align: center; transform: translate(-50%,-50%); overflow: hidden; @include transition(all 0.3s ease-out); h3 { color: #fff; } p { color: #fff; } .featured-description { @include transition(all 0.5s ease-out); opacity: 0; a { display: inline-block; } } } .box-link { position: absolute; display: block; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; @include transition(all 0.3s ease-out); } &:hover .box-link { background: rgba(0,0,0,0.5); } &:hover .featured-description { opacity: 1; } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="grid__item {{ column_width }}"> <div class="featured-image-box" style="background-image: url(http://lorempixel.com/400/600/);"> <a href="{{ block.settings.featuredsection-url }}" class="box-link"></a> <div class="text-area"> <div class="featured-title"> <h3> {{ block.settings.featuredsection-title }} </h3> </div> <div class="featured-description"> <p>{{ block.settings.featuredsection-description }}</p> <span class="btn btn--small">{{ block.settings.featuredsection-linktext }}</span> </div> </div> </div> </div> 

It kind of works, but the height measurements aren't correct when I hover of the image and back. Please help.

Answer 1

If you can use jquery-UI: The Toolip widget gives some usefull options. (like positioning etc. )

More Details under https://jqueryui.com/tooltip/