<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; 
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.