Выпадающие описания к картинкам
<style> .hiden_content{ display: none; position: absolute; width: 423px; padding: 25px 30px; background-color: #fff; border: 1px solid #e0d15a; border-radius: 24px; margin-top: 10px; z-index: 1000; } .visual-content .g_image img{ border-radius: 50%; border:1px solid rgba(0, 0, 0, 0.1); z-index: auto; } .sps-post-alt , .sps-post-alt:first-child,.sps-post-alt:last-child{ position: relative; z-index: auto; width: 82px; height: 82px; float: left; margin: 10px 15px; } .g_container:after{ content:""; width: 0; height: 0; display: block; clear: both; } .sps-post-alt .name{ font-weight: 600; font-size: 18px; margin-bottom: 10px; } </style> <div class="g_container"> <div class=" sps-post-alt"> <div class="g_image"> <a href="" title="Заголовок"> <img width="82" height="82" src="" alt="alt"> </a> </div> <div class="hiden_content"> <div class="name title-h3"> Заголовок </div> <div class="text"> <p>Описание</p> </div> </div> </div> <div class=" sps-post-alt"> <div class="g_image"> <a href="" title="Заголовок"> <img width="82" height="82" src="" alt="alt"> </a> </div> <div class="hiden_content"> <div class="name title-h3"> Заголовок </div> <div class="text"> <p>Описание</p> </div> </div> </div> </div>
$('.g_image').mouseover(function () { var elem = $(this).next(".hiden_content");; // if (elem.find('.text p').text()) { var $container = $('.g_container'); var dif = elem.offset().left - $container.offset().left; var dif2 =$container.width() - elem.width(); var elPosTop = elem.offset().top; //console.info(elPosTop); if ((dif + 62) > dif2) { elem.offset({ left: elem.offset().left - (dif - dif2) - 62 }); } elem.show(); }); $('.g_image').mouseleave(function () { $(this).next(".hiden_content").hide(); });