подскажите пожалуйста как можно реализовать. Нужно чтобы при наведении на блок, вылазил сверху вниз текст. Для каждого блока свой текст. И чтобы текст налазил на кусок следующего блока. Заранее спасибо. Есть код:
<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;
}
}
}
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Добрый день не работает якорь если заходить на сайт сразу с ним пример - siteru/#skidka а если я нажимаю на то все поднимается куда нужно
Использую Spring Security, Spring MVC, Spring Data и Spring BootМне надо дать возможность пользователю добавлять видео на сайт
В общем такая, задача, у меня есть DialogFramgent в котором реализованы настройки приложения, и внизу есть кнопки, Отмена и ПрименитьТак вот, если...