<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.