<section class="info">  
    <div class="container"> 
      <div class="info__wrap">
        <a href="" class="info__item">
          <div class="info__content"> 
            <p class="info__number">number number </p>
            <div class="info__block"> 
              <h4 class="info__subtitle">lorem lorem lorem</h4>
              <div class="info__text">  
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eveniet, officiis beatae libero! Ab debitis aperiam aliquam consequatur assumenda deserunt, quisquam amet repudiandae accusamus quia odit iste ad repellat ipsam.</p>
              </div>    
            </div>  
          </div>
          <div class="info__image">
            <img src="img/note-test.png" alt="">
          </div>
        </a>
        <a href="" class="info__item">
          <div class="info__image">
            <img src="img/note-test.png" alt="">
          </div>
        </a>
      </div>
    </div>
  </section>

.info {
  background-color: #4a4a4c;
}

.info__content {
  background-color: #595a58;
}
.info__number {
  position: relative;
  z-index: 2;
  font-size: 14px;
  color: #90918e;
  font-weight: 400;
  letter-spacing: 1.4px;
  background: #4a4a4c;
  width: 50%;
clip-path: polygon(0 0, 100% 0, 79% 100%, 0% 100%);
}

.info__subtitle {
  font-size: 14px;
  color: #90918e;
  text-decoration: underline;
  padding-bottom: 12px;
  font-family: Cuprum;
  font-weight: 400;
}

.info__block {
  padding: 0 8px;
  padding-top: 35px;
}

.info__text p {
  font-size: 14px;
  color: #90918e;
  letter-spacing: 0.7px;
  font-family: Cuprum;
  font-weight: 400;
}

.info__link:hover {
  text-decoration: none;
}

.info__wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.info__item {
  width: calc(100% / 2 - 20px);
  margin: 0 10px;
}

.info__item:hover .info__image:after {
  background-color: transparent;
}

.info__image {
  position: relative;
}

.info__image:after {
  position: absolute;
  content: ' ';
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(89, 90, 88, 0.4);
  transition: 0.3s background-color;
}

.info__image img {
  display: block;
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.