При наведении на блок появляется текст

180
11 мая 2018, 08:12

подскажите пожалуйста как можно реализовать. Нужно чтобы при наведении на блок, вылазил сверху вниз текст. Для каждого блока свой текст. И чтобы текст налазил на кусок следующего блока. Заранее спасибо. Есть код:

<div class="new-home-page-reviews container w960">
    <div class="reviews-tab-items col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <div class="reviews-tab-items-content">
            <div class="reviews-tab-item-image showHideContent">
                <div class="reviews-item-text">Благодаря внедренной B2B системы мы в режиме on-line можем видеть все движения товаров, заказы покупателей, наши партнеры в личном кабинете могут всегда видеть актуальные цены в их регионе.</div>
            </div>
            <div class="reviews-tab-item-logo"></div>
                <div class="reviews-tab-item-name">Першин Сергей Алексеевич<span>ООО “Юнипол”</span></div>
                <div class="hidden-text container w960 content"><div class="hidden-text-triangle col-md-12"><div class="reviews-hidden-text col-md-12">ssssКрупный российский дистрибьютор шин и дисков компания Юнипол работает на российском рынке более 20 лет.В IT-Lite мы арендуем конфигурацию 1С:Управление торговлей 10.3 начиная с 2009 года. Компания имеет географически распределенную структуру с партнерской сетью в 29 регионах России. Это накладывает специфику на ведение бизнеса. В 2010 году специалистами компании IT-Lite были внедрены доработки в конфигурацию 1С:Упраление торговлей и встроена система B2B, работающая через WEB-расширение. B2B портал посредством подключения к информационной базе 1С:УТ позволяет отслеживать в режиме реального времени товарные остатки, цены, отгрузки, а также осуществлять заказы. <br><br> Благодаря внедренной B2B системы мы в режиме on-line можем видеть все движения товаров, заказы покупателей, наши партнеры в личном кабинете могут всегда видеть актуальные цены в их регионе. Для крупного дистрибьютора с большим регионом охвата и количеством рабочих мест с несколько сотен - это фундамент для успешного бизнеса.<br><br> Мы сотрудничаем с компанией IT-Lite более 5 лет. Планируем расти и развиваться вместе и дальше.</div></div></div>
        </div>
    </div>
    <div class="reviews-tab-items col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <div class="reviews-tab-items-content">
            <div class="reviews-tab-item-image showHideContent">
                <div class="reviews-item-text">Сотрудничать с компанией IT-Lite мы начали еще в 2011 году, арендуем выделенный сервер. Технические вопросы, которые возникали за годы работы, оперативно решались специалистами компании.</div>
            </div>
            <div class="reviews-tab-item-logo"></div>
                <div class="reviews-tab-item-name">Мозолевский Максим Александрович <span>ООО “АЛЬФАСНАБ оптовые системы”</span></div>
                <div class="hidden-text container w960 content3"><div class="hidden-text-triangle col-md-12"><div class="reviews-hidden-text col-md-12">ffffКрупный российский дистрибьютор шин и дисков компания Юнипол работает на российском рынке более 20 лет.В IT-Lite мы арендуем конфигурацию 1С:Управление торговлей 10.3 начиная с 2009 года. Компания имеет географически распределенную структуру с партнерской сетью в 29 регионах России. Это накладывает специфику на ведение бизнеса. В 2010 году специалистами компании IT-Lite были внедрены доработки в конфигурацию 1С:Упраление торговлей и встроена система B2B, работающая через WEB-расширение. B2B портал посредством подключения к информационной базе 1С:УТ позволяет отслеживать в режиме реального времени товарные остатки, цены, отгрузки, а также осуществлять заказы. <br><br> Благодаря внедренной B2B системы мы в режиме on-line можем видеть все движения товаров, заказы покупателей, наши партнеры в личном кабинете могут всегда видеть актуальные цены в их регионе. Для крупного дистрибьютора с большим регионом охвата и количеством рабочих мест с несколько сотен - это фундамент для успешного бизнеса.<br><br> Мы сотрудничаем с компанией IT-Lite более 5 лет. Планируем расти и развиваться вместе и дальше.</div></div></div>
        </div>        
    </div>
    <div class="reviews-tab-items col-xs-12 col-sm-12 col-md-4 col-lg-4">
        <div class="reviews-tab-items-content">
            <div class="reviews-tab-item-image showHideContent">
               <div class="reviews-item-text">ООО “Инитлаб” благодарит компанию IT-Lite за предоставление надежных выделенных и виртуальных серверов для задач нашего бизнеса. Отдельно хотелось бы отметить оперативную техническую поддержку!</div>
            </div>
            <div class="reviews-tab-item-logo"></div>
               <div class="reviews-tab-item-name">Агабеков Роман Александрович<span>ООО “Инитлаб”</span></div>
               <div class="hidden-text container w960 content3"><div class="hidden-text-triangle col-md-12"><div class="reviews-hidden-text col-md-12">ffffКрупный российский дистрибьютор шин и дисков компания Юнипол работает на российском рынке более 20 лет.В IT-Lite мы арендуем конфигурацию 1С:Управление торговлей 10.3 начиная с 2009 года. Компания имеет географически распределенную структуру с партнерской сетью в 29 регионах России. Это накладывает специфику на ведение бизнеса. В 2010 году специалистами компании IT-Lite были внедрены доработки в конфигурацию 1С:Упраление торговлей и встроена система B2B, работающая через WEB-расширение. B2B портал посредством подключения к информационной базе 1С:УТ позволяет отслеживать в режиме реального времени товарные остатки, цены, отгрузки, а также осуществлять заказы. <br><br> Благодаря внедренной B2B системы мы в режиме on-line можем видеть все движения товаров, заказы покупателей, наши партнеры в личном кабинете могут всегда видеть актуальные цены в их регионе. Для крупного дистрибьютора с большим регионом охвата и количеством рабочих мест с несколько сотен - это фундамент для успешного бизнеса.<br><br> Мы сотрудничаем с компанией IT-Lite более 5 лет. Планируем расти и развиваться вместе и дальше.</div></div></div>
        </div>
    </div>
</div>

CSS:

.new-home-page-reviews{
                position: relative;
                padding: 0;
                margin-bottom: 30px;
                .reviews-tab-items{
                    position: relative;
                    padding-bottom: 15px;
                    .reviews-tab-item-image{
                        border-top-left-radius: 10px;
                        border-top-right-radius: 10px;
                        display: table;
                        cursor: pointer;
                        .reviews-item-text{
                            padding: 0 8px;
                            display: table-cell;
                            vertical-align: middle;
                            height: 186px;
                            text-align: center;
                            color: white;
                            position: relative;
                            border-top-left-radius: 10px;
                            font-size: 14px;
                            border-top-right-radius: 10px;
                            &:before{
                                background: url(image/quote_img.png) no-repeat;
                                content: '';
                                position: absolute;
                                width: 15px;
                                height: 21px;
                                top: 13px;
                                left: 35px;
                            }
                        }
                    }
                    &:nth-child(1) .reviews-tab-item-image{
                        background: url(image/1-0.png) no-repeat;
                        background-size: cover;
                        &:hover{
                            background: url(image/1-1.png) no-repeat;
                            background-size: cover;
                        }
                    }
                    &:nth-child(2) .reviews-tab-item-image{
                        background: url(image/2-0.png) no-repeat;
                        background-size: cover;
                        &:hover{
                            background: url(image/2-1.png) no-repeat;
                            background-size: cover;
                        }
                    }
                    &:nth-child(3) .reviews-tab-item-image{
                        background: url(image/3-0.png) no-repeat;
                        background-size: cover;
                        &:hover{
                            background: url(image/3-1.png) no-repeat;
                            background-size: cover;
                        }
                    }
                    .reviews-tab-item-logo{
                        position: absolute;
                        width: 50%;
                        height: 35px;
                        left: 26%;
                        border-radius: 20px;
                        top: 56%;
                        text-align: center;
                        box-shadow: 0px 4px 8.8px 0.2px rgba(0, 0, 0, 0.05);
                        background: white;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                    &:nth-child(1) .reviews-tab-item-logo{
                        background-image: url(image/unipol_logo.png);
                    }
                    &:nth-child(2) .reviews-tab-item-logo{
                        background-image: url(image/alfasnab_logo.png);
                    }
                    &:nth-child(3) .reviews-tab-item-logo{
                        background-image: url(image/initlab_ico.png);
                    }
                    .reviews-tab-item-name{
                        height: 100px;
                        text-align: center;
                        padding: 33px 0px 0px;
                        box-shadow: 0px 4px 8.8px 0.2px rgba(0, 0, 0, 0.05);
                        border-bottom-left-radius: 10px;
                        border-bottom-right-radius: 10px;
                        background: white;
                        font-size: 14px;
                        font-weight: bold;
                        color: #000000;
                    &>span{
                        font-size: 15px;
                        font-weight: normal;
                        display: block;
                    }
                    }
                }
            &:before{
                content: '';
                background: url(image/object_1.png) no-repeat;
                position: absolute;
                height: 235px;
                width: 295px;
                right: 95%;
                bottom: 0;
                @media screen and (max-width: 1292px) {
                    display: none;
                }
            }
            }
READ ALSO
Якорь не работает как надо

Якорь не работает как надо

Добрый день не работает якорь если заходить на сайт сразу с ним пример - siteru/#skidka а если я нажимаю на то все поднимается куда нужно

192
Как вставить фрагмент одной страницы в &lt;IFrame/&gt;?

Как вставить фрагмент одной страницы в <IFrame/>?

У меня есть группа файлов jsf

167
Как добавить видео в Java Spring? [требует правки]

Как добавить видео в Java Spring? [требует правки]

Использую Spring Security, Spring MVC, Spring Data и Spring BootМне надо дать возможность пользователю добавлять видео на сайт

245
Условие на изменение переменных в SharedPreferences

Условие на изменение переменных в SharedPreferences

В общем такая, задача, у меня есть DialogFramgent в котором реализованы настройки приложения, и внизу есть кнопки, Отмена и ПрименитьТак вот, если...

181