<div class="blok first">
  <p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo fermentum orci, in iaculis mi volutpat in. Vestibulum sit amet cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque bibendum malesuada tellus vitae accumsan. Vivamus sed metus efficitur, vehicula mauris in, elementum massa.</p>
</div>

<div class="blok second">
  <p> 2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo fermentum orci, in iaculis mi volutpat in. Vestibulum sit amet cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque bibendum malesuada tellus vitae accumsan. Vivamus sed metus efficitur, vehicula mauris in, elementum massa.</p>
</div>

<div class="blok third">
  <buttom>3) Lorem ipsum dolor</buttom>
</div>

<div class="blok fourth">
  <p>4) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo fermentum orci, in iaculis mi volutpat in. Vestibulum sit amet cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque bibendum malesuada tellus vitae accumsan. Vivamus sed metus efficitur, vehicula mauris in, elementum massa.</p>
</div>

<div class="blok fifth">
  <p>5) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo fermentum orci, in iaculis mi volutpat in. Vestibulum sit amet cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque bibendum malesuada tellus vitae accumsan. Vivamus sed metus efficitur, vehicula mauris in, elementum massa.</p>
</div>

<div class="blok sixth">
  <p>6) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo fermentum orci, in iaculis mi volutpat in. Vestibulum sit amet cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque bibendum malesuada tellus vitae accumsan. Vivamus sed metus efficitur, vehicula mauris in, elementum massa.</p>
</div>
body {
  background: #f0f0f0;  
}

.blok {
  position: relative;
  background: #fff;
  margin: 25px;
  padding: 25px;
  min-height: 150px;
  font-size: 25px;
  overflow: hidden;
  color: #333;
  box-shadow: 0 5px 3px rgba(0, 0, 0, 0.25), 0 5px 3px rgba(0, 0, 0, 0.10);
  transition: all 0.15s ease;
}

.blok:hover {
    box-shadow: 0 7px 5px rgba(0, 0, 0, 0.25), 0 7px 5px rgba(0, 0, 0, 0.10);
}

.blok p {
  margin: 0;
  padding: 0;
  background-color: #eee;
}

.blok:hover p {
   border: 1px dashed #000;
}

.first p {
    position: absolute;
    padding: 0 25px;  
    top: 33%;
    right: 0;
    bottom: 0;
    left: 0;
}


.second {
  height: 150px;
}
.second p {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.third {
  width: 250px;
  height: 75px;
  line-height: 75px;
  border-radius: 15px;
  margin: 0 auto;
  padding: 0;
  min-height: auto;
  text-align: center;
}


.blok.fourth {height: 33vh;}
.fourth p {
  padding: 16.5vh 8.25vh;
}


.fifth {
  display: table;
}
.fifth p {
  display: table-cell;
  vertical-align: middle;
}


.sixth {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.