On element hover show description

Question

I have few elements in a row. I want to display just img and when you hover on it the description would be shown below. It works fine but when description is shown the whole div expands and it mess up the row. How can i set it to be

• exact same width and height all the time
• the text should just display on pic below.

Here is the code:

 $(document).ready(function() { $('.box').hover(function() { $(this).find('.details').show(500); $(this).addClass('higlighted'); }, function() { $('.details').hide(500); $(this).removeClass('higlighted'); }) }); 

 .products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; transition: 1s; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); position: absolute; transition: 1s; } 

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> 

Answer 1

You can set the width of .higlighted as the width of .box :

 $(document).ready(function() { $('.box').hover(function() { $(this).find('.details').show(500); $(this).addClass('higlighted'); var w = $('.box').width(); $('.higlighted').css({width: `${w}`}); }, function() { $('.details').hide(500); $(this).removeClass('higlighted'); }) }); 

 .products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; transition: 1s; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); position: absolute; transition: 1s; } 

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> 

Answer 2

used css to achieve it.

.box:hover .details{
    display: block;
        transition: 1s;
}

.box:hover{
    background: rgba(98, 192, 23);
    transition: 1s;
}

let me know if anything else needs to be changed. thanks

 .products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; transition: 1s; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); position: absolute; transition: 1s; } .box:hover .details{ display: block; transition: 1s; } .box:hover{ background: rgba(98, 192, 23); transition: 1s; } 

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> 

Answer 3

It's your css property transition: 1s that causing you trouble because you're doing that with jQuery as well with hide(500) and show(500) .

If you're doing the jQuery way, you just have to remove the css property.

The height is adjusting dynamically because of the transition. If you don't want that, either do not use transition or do it @Mamun's way.

 $(document).ready(function() { $('.box').hover(function() { $(this).find('.details').show(500); $(this).addClass('higlighted'); }, function() { $('.details').hide(500); $(this).removeClass('higlighted'); }) }); 

 .products { justify-content: center; } .products-description { padding-top: 50px; padding-bottom: 50px; } .products-description h1 { font-family: 'Homenaje', sans-serif; font-size: 50px; padding-bottom: 40px; } .products-description p { font-family: 'Mada', sans-serif; font-weight: 300; font-size: 22px; } .box { padding-bottom: 3em; padding-top: 3em; } .box .details { display: none; } .box .details p { font-size: 14px; } .higlighted { background: rgba(98, 192, 23); } 

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div> <div class="row products"> <div class="col-lg-1 box" id="box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details" id="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> <div class="col-lg-1 box"> <div class="imgBox"> <img class="product-mouseover" src="https://via.placeholder.com/150 C/O https://placeholder.com/" alt=""> </div> <div class="details"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p> </div> </div> </div>