andxbes

Выпадающие описания к картинкам

<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();
    });