Линейный градиент через CSS + фоновая картинка

Рейтинг: -1Ответов: 2Опубликовано: 09.04.2023

Встала задача с версткой вот такой карточки: карточка

Изначально делал через background-image с добавлением иконки и линейного градиента, но возникла проблема, когда стало необходимо реализовать hover, при котором цвет градиента с серого меняется на синий. И получается, что ховер перекрывает иконку. Пробовал добавить еще один класс отдельно для иконки, но проблема не решается. Можно описать индивидуальный класс и ховер для него, но это огромная партянка css кода.

Как решить этот вопрос лаконично и ревелантно? Забрать с фигмы градиет вместе с иконкой?

css вёрстка
Источник: Stack Overflow на русском

Ответы

▲ 0

Вам так надо?

П.С. Я бы не стал заказывать ничего на сайте, где такие безграмотные и стилистически уродливые тексты.

.whyus__card {
  width: 400px;
  height: 400px;
  background-image: url('https://i.ibb.co/ZKLJgqn/money-svgrepo-com-1.png'), linear-gradient(66deg, rgb(58, 59, 63), rgb(31, 31, 31));
  background-repeat: no-repeat, repeat;
  background-position: bottom right, top left;
  padding-top: 42px;
  box-sizing: border-box;
}

.whyus__card:hover {
  background-image: url('https://i.ibb.co/ZKLJgqn/money-svgrepo-com-1.png'), linear-gradient(132deg, rgb(82, 119, 145), rgb(50, 85, 151), rgb(25, 56, 149));
}

.whyus__card-title {
  font-size: 26px;
  color: #FFFFFF;
  margin: 42px 97px 20px 45px;
}

.whyus__card-text {
  font-size: 17px;
  color: #FFFFFF;
  margin: 0px 70px 190px 45px;
}
<article class="whyus__card">
  <h3 class="whyus__card-title">Приемлимые цены</h3>
  <p class="whyus__card-text">Мы максимально стараемся снизить цены на нашу работу для того чтобы цены не кусались</p>

</article>

▲ 0

В итоге решил вопрос выгрузкой данных иконок в формате SVG. Код:

.whyus__card-icon {
    z-index: -1;
    position: relative;
    left: 47%;
    top: 1%;
}

.whyus__card {
    position: relative;
    max-width: 398px;
    border: 1px solid gray;
    border-radius: 6px;
    background-image: linear-gradient(66deg, rgb(58, 59, 63), rgb(31, 31, 31));
    z-index: 1;
}

.whyus__card:hover {
    box-shadow: 0px 0px 55px rgba(59,95,150,0.35);
    background-image: linear-gradient(132deg, rgb(82, 119, 145), rgb(50, 85, 151), rgb(25, 56, 149));
    transition: 0.7s;
  }

.whyus__card:hover svg linearGradient stop {
    transition: 0.7s;
}

.whyus__card:hover svg linearGradient stop:first-child {
    stop-color: rgba(88, 125, 219, 1);
}

.whyus__card:hover svg linearGradient stop:last-child {
    stop-color: rgba(97, 135, 232, 1);
}
  <article class="whyus__card">
                    <h3 class="whyus__card-title">Приемлимые цены</h3>
                    <p class="whyus__card-text">Мы максимально стараемся снизить цены на нашу работу для того чтобы цены не кусались</p>
                    <svg class="whyus__card-icon" width="211" height="201" viewBox="0 0 211 201" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M131.951 54.9951C117.366 44.8757 93.8071 44.8757 79.309 54.9951C64.8109 65.1145 64.8972 81.565 79.4816 91.6844C94.066 101.804 117.625 101.804 132.123 91.6844C146.622 81.5131 146.535 65.1145 131.951 54.9951ZM125.263 70.9267C124.011 71.3937 122.76 71.9127 121.509 72.3797C120.732 72.6392 120.257 72.6911 119.912 72.4835C119.74 72.3278 119.567 72.1203 119.394 71.8089C118.575 70.2002 117.323 68.799 115.641 67.6573C115.425 67.5016 115.166 67.346 114.907 67.1903C114.346 66.827 113.828 66.5675 113.138 66.36C110.722 65.6853 108.564 66.7751 108.866 68.5914C108.996 69.5255 109.427 70.3558 109.945 71.238C110.808 72.6911 111.757 74.1441 112.361 75.701C114.389 80.579 109.988 85.4052 102.912 85.8723C100.366 86.0279 97.9494 85.6647 95.7057 84.7825C94.7132 84.4192 93.9797 84.4192 93.2462 85.042C92.5126 85.6128 91.6928 86.1317 90.9161 86.6507C90.2257 87.1177 89.4922 87.1696 88.8018 86.7026C88.284 86.3912 87.8094 86.0279 87.2916 85.7166C86.9464 85.4571 86.6012 85.2495 86.256 84.9901C85.5225 84.4711 85.6088 83.9522 86.2992 83.4332C86.8601 83.0181 87.421 82.6548 87.9388 82.2396C89.1902 81.3574 89.1902 81.3056 88.1546 80.3196C86.8601 79.0741 85.6951 77.7767 84.9615 76.3237C84.4006 75.182 84.53 74.9225 86.0403 74.2998C87.1621 73.8847 88.2409 73.4176 89.3628 73.0025C90.1826 72.6911 90.6572 72.6392 91.0024 72.8468C91.2182 73.0025 91.3476 73.21 91.5202 73.5733C92.2537 75.2339 93.5051 76.687 95.0153 78.0881C95.2742 78.3476 95.5762 78.5552 95.8351 78.7627C96.6549 79.3336 97.6042 79.7487 98.6829 80.0601C101.488 80.8385 103.99 79.4893 103.731 77.3616C103.645 76.6351 103.343 76.0123 102.955 75.3377C102.005 73.6252 100.754 72.0165 100.107 70.2002C99.0713 67.2941 99.5459 64.6475 102.868 62.5717C106.666 60.2364 110.894 60.0808 115.382 61.5338C117.237 62.1565 117.194 62.1565 118.618 61.1705C119.092 60.8073 119.567 60.4959 120.042 60.1845C121.12 59.458 121.509 59.458 122.587 60.1845C122.933 60.3921 123.235 60.6516 123.58 60.8592C125.867 62.416 125.867 62.416 123.623 64.0247C122.027 65.1145 122.027 65.1145 123.364 66.4119C124.4 67.3979 125.22 68.4357 125.824 69.5774C126.298 70.1483 126.126 70.6153 125.263 70.9267ZM151.411 105.073C147.398 107.875 140.883 107.875 136.827 105.073C132.814 102.271 132.771 97.7042 136.784 94.9019C140.796 92.0996 147.312 92.0996 151.368 94.9019C155.424 97.7042 155.467 102.271 151.411 105.073ZM74.6058 51.7258C70.5929 54.5281 64.0774 54.5281 60.0214 51.7258C55.9654 48.9235 55.9654 44.3567 59.9782 41.5544C63.9911 38.7521 70.5066 38.7521 74.5626 41.5544C78.5755 44.3567 78.6186 48.9235 74.6058 51.7258ZM205.995 83.3294L91.0024 3.46395C84.3574 -1.15465 73.5702 -1.15465 66.9684 3.46395L5.30837 46.5363C-1.29343 51.1549 -1.25028 58.6796 5.39467 63.2982L120.387 143.164C127.032 147.782 137.819 147.782 144.421 143.164L206.038 100.091C212.683 95.4727 212.64 87.948 205.995 83.3294ZM145.672 127.959C144.939 127.128 144.076 126.35 143.04 125.623C136.309 120.953 125.392 120.953 118.704 125.623C118.186 125.987 117.755 126.35 117.28 126.765L28.0048 64.7512C28.8678 64.3361 29.6876 63.869 30.4643 63.3501C37.1524 58.6796 37.1092 51.103 30.378 46.4325C29.6444 45.9136 28.8678 45.4465 28.0479 45.0833L64.8541 19.3436C65.415 19.9145 66.0622 20.4334 66.7958 20.9524C73.527 25.6229 84.4437 25.6229 91.1319 20.9524C91.9085 20.4334 92.5558 19.8626 93.1599 19.2399L182.737 81.4093C181.529 81.9283 180.45 82.4991 179.415 83.2257C172.727 87.8962 172.727 95.5246 179.501 100.195C180.537 100.922 181.702 101.492 182.91 102.011L145.672 127.959ZM2.37424 79.2817C5.30837 77.4654 9.83903 77.7248 12.6437 79.6968L132.857 163.143L197.839 117.684C200.644 115.712 205.261 115.712 208.109 117.684C210.957 119.656 210.957 122.873 208.152 124.845L139.07 173.107C135.705 175.494 130.182 175.494 126.773 173.107L124.357 171.446L122.674 170.253L2.15849 86.5988C-0.775643 84.5749 -0.732494 81.2018 2.37424 79.2817ZM208.238 150.948L139.157 199.21C135.791 201.597 130.268 201.597 126.859 199.21L124.486 197.549L122.76 196.355L2.24479 112.702C-0.689344 110.678 -0.603046 107.305 2.50369 105.385C5.39467 103.568 9.96847 103.828 12.7732 105.8L132.943 189.246L197.926 143.838C200.774 141.866 205.347 141.866 208.195 143.838C211.043 145.758 211.086 148.976 208.238 150.948Z" fill="url(#paint0_linear_90_1010)"/>
                    <defs>
                    <linearGradient id="paint0_linear_90_1010" x1="18.1405" y1="45.9675" x2="189.121" y2="165.8" gradientUnits="userSpaceOnUse">
                    <stop stop-color="#3C3C3C"/>
                    <stop offset="0.9996" stop-color="#262626"/>
                    </linearGradient>
                    </defs>
                    </svg>                                 
                </article>