Как поправить чтобы было как на скрине?

Question

[olya_097]

https://codepen.io/anon/pen/qzWgve

Comments

[Сергей Бурдужа]

Для блока .news__text задаете position: absolute, для блока .news__description - position: absolute, фиксированную высоту и overflow:hidden.
А далее при наведении на блок .news__text, просто увеличивайте высоту блок .news__description.
Можете также задать transition.

Я попробую на codepen реализовать.

Answer 1

[noeer]

Нужно обернуть каждую карточку в дополнительный блок с фиксированной высотой.

<div class="news__item-wrap">
	<div class="news__item">
		<div class="products__image">
			<img src="https://i.ibb.co/Jm1BgzF/picture-image.jpg" alt="">
		</div>
		<div class="news__text">  
			<div class="news__title">
				Выработка масла в год ...
			</div>
			<p class="news__description">
				В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. В Минск прибыли самые покупатели газа из Украины: «Автотранс», «НАДЕЖДА», «Укренерджи», ОККО, SOCAR, «БРСМ-Натфа», KLO и др. поставщиков представлляли. 
			</p>
		</div>
	</div>
</div>

.news__item-wrap {
  	height: 352px;
    width: -webkit-calc(100% / 3 - 16px);
    width: calc(100% / 3 - 16px);
    margin-right: 8px;
    margin-left: 8px;
    padding-bottom: 15px;
    margin-bottom: 35px;
  }
    @media screen and (max-width: 960px) {
      .news__item-wrap {
        width: -webkit-calc(100% / 2 - 16px);
        width: calc(100% / 2 - 16px); } }
    @media screen and (max-width: 767px) {
      .news__item-wrap {
        width: -webkit-calc(100% / 1 - 16px);
        width: calc(100% / 1 - 16px); } }

  .news__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25); }
   	.news__item:hover {
   		z-index: 2;
   	}

Comments

[Сергей Бурдужа]

И, что это дало?
Обернули див в блок с фиксированной шириной, а дальше?
Проблема в том, что у блоков есть тень, и нельзя задавать box-shadow-top: none;
А при наведении, блок вырывается из потока, чтобы накрыть другой блок снизу.
Если вырвать только .news__text, то проблемы с тенью.

[noeer]

Сергей Бурдужа, проблемы нет, так как тень задается для .news__item, а у обертки .news__item-wrap нет overflow: hidden;
При наведении, .news__item будет просто выходить на пределы родительского блока.
Код рабочий. Можете подставить в исходник и проверить.

[Сергей Бурдужа]

Спасибо вам, я решил эту задачу.

[olya_097]

noeer, спасибо

Answer 2

[Сергей Бурдужа]

noeer совершенно прав.
Нужно обернуть каждый блок и задать position: relative, а самому блоку position: absolute.

Вот как я сделал

https://jsfiddle.net/serii/15oc6ytx/2/

Comments

[olya_097]

Сергей Бурдужа, спасибо