hover absolute

by Burduja Serghei

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
<section class="products">
      <div class="container">
          <h2>some title</h2>

          <div class="grid">
              <div class="grid__item-wrap">
                  <div class="grid__item">
                      <div class="img"></div>
                      <div class="grid__descr">
                          <div class="grid__text">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur corporis deserunt distinctio exercitationem facere facilis fugit harum ipsum, minus natus non omnis possimus quae quo ratione rerum saepe tenetur?
                          </div>
                      </div>
                  </div>
              </div>
              <div class="grid__item-wrap">
                  <div class="grid__item">
                      <div class="img"></div>
                      <div class="grid__descr">
                          <div class="grid__text">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur corporis deserunt distinctio exercitationem facere facilis fugit harum ipsum, minus natus non omnis possimus quae quo ratione rerum saepe tenetur?
                          </div>
                      </div>
                  </div>
              </div>
              <div class="grid__item-wrap">
                  <div class="grid__item">
                      <div class="img"></div>
                      <div class="grid__descr">
                          <div class="grid__text">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequatur...

CSS

.container {
	margin: 0 auto;
	width: 900px;
}
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 30px;
}
.img	{
	width: 100%;
	height: 100px;
	background: gray;
}
.grid__item-wrap {
	position: relative;
	height: 220px;
}
.grid__item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 220px;
	box-shadow: 0 0 10px 3px rgba(0,0,0,.4);
}

.grid__item:hover {
	height: 310px;
	z-index: 10;
	cursor: pointer;
}
.grid__item:hover .grid__text {
	height: 170px;
}
.grid__descr {
	padding: 20px;
	background: #fff;
}
.grid__text {
	height: 70px;
	overflow: hidden;
}