$('.product__item').hover(function () { $(this).css({ overflow:'visible' }) $(this).children('.product__add').css({ display:'flex' }) }, function () { $(this).css({ overflow:'hidden' }) $(this).children('.product__add').css({ display:'none' }) }); .product { width: 100%; position: relative; } .product__item { width: 150px; display: inline-block; vertical-align: top; position: relative; overflow: hidden; } .product__block { width: 100%; background-color: red; } .product__p { background-color: red; height: 200px; } .product__add { height: 150px; width: 100%; background-color: blue; display: none; z-index: 4; } .product__add-pos { position: absolute; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="owl__products" class="product"> <div class="product__item"> <div class="product__block product__block-pos"> <div class="product__p"></div> </div> <div class="product__add product__add-pos"></div> </div> <div class="product__item"> <div class="product__block product__block-pos"> <div class="product__p"></div> </div> <div class="product__add product__add-pos"></div> </div> <div class="product__item"> <div class="product__block product__block-pos"> <div class="product__p"></div> </div> <div class="product__add product__add-pos"></div> </div> <div class="product__item"> <div class="product__block product__block-pos"> <div class="product__p"></div> </div> <div class="product__add product__add-pos"></div> </div> <div class="product__item"> <div class="product__block product__block-pos"> <div class="product__p"></div> </div> <div class="product__add product__add-pos"></div> </div> </div> http://www.templatemonster.com/demo/53638.html
I need to make a similar block like in the carousel on the main page of this site. That is, that there would be a block with the description of the product product product__p and when you hover over it, additional information about the product product__add product was shown, BUT, this additional unit should not affect the blocks around (which would be position: absolute; ). I made this demo, it is working, but I'm not sure about it, because I indicated position: absolute; for an additional block and did not indicate it top, left, right or bottom, everything works fine product__add appears under (after) product__p . But is it normal, or is it better to do something else?
