<div class="container functions">
<h2>Функции</h2>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="func-card">
<img class="func-icon" src="https://bigidea.su/greenex/images/home/functions/icons/functions1.svg" alt="">
<p>Управление <br>доставкой</p>
<img class="func-image" src="https://bigidea.su/greenex/images/home/functions/images/functions1.png" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="func-card">
<img class="func-icon" src="https://bigidea.su/greenex/images/home/functions/icons/functions2.svg" alt="">
<p>Сотрудничество <br>с магазинами</p>
<img class="func-image" src="https://bigidea.su/greenex/images/home/functions/images/functions2.png" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="func-card">
<img class="func-icon" src="https://bigidea.su/greenex/images/home/functions/icons/functions3.svg" alt="">
<p>Калькулятор <br>доставки</p>
<img class="func-image" src="https://bigidea.su/greenex/images/home/functions/images/functions3.png" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="func-card">
<img class="func-icon" src="https://bigidea.su/greenex/images/home/functions/icons/functions4.svg" alt="">
<p>Телеграм-бот <br>для поставщиков</p>
<img class="func-image" src="https://bigidea.su/greenex/images/home/functions/images/functions4.png" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="func-card">
<img class="func-icon" src="https://bigidea.su/greenex/images/home/functions/icons/functions5.svg" alt="">
<p>Служба <br>поддержки</p>
<img class="func-image" src="https://bigidea.su/greenex/images/home/functions/images/functions5.png" alt="">
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="func-card">
<img class="func-icon" src="https://bigidea.su/greenex/images/home/functions/icons/functions6.svg" alt="">
<p>Интеграция <br>сервиса на сайт</p>
<img class="func-image" src="https://bigidea.su/greenex/images/home/functions/images/functions6.png" alt="">
</div>
</div>
</div>
</div>
/****** functions ******/
.functions {
margin-bottom: 4rem;
}
.functions h2 {
margin-bottom: 1rem;
}
.functions .row .col-lg-4 {
padding: 10px;
}
.func-card {
height: 240px;
background: #F9F9F9;
border: 1px solid #E2E5E6;
box-sizing: border-box;
border-radius: 5px;
position: relative;
}
.func-card:hover .func-icon {
filter: invert(53%) sepia(52%) saturate(562%) hue-rotate(70deg) brightness(98%) contrast(86%);
}
.func-card p {
font-weight: 500;
font-size: 20px;
line-height: 23px;
color: #000000;
position: absolute;
bottom: 30px;
left: 30px;
margin: 0;
}
.func-card .func-image {
position: absolute;
bottom: 0px;
right: 0px;
}
.func-card .func-icon {
position: absolute;
top: 30px;
left: 30px;
}
.func-card:hover .func-image {
transform: scale(1.2);
transition: all .3s ease-in-out;
}
This Pen doesn't use any external JavaScript resources.