为什么背景过渡：linear-gradient() 在悬停时不起作用？

Question

Here is my code:

Two things are not working

1. background: linear-gradient(); transition on hover

2. SOLVED HERE text inside .col-md-9 should be white on hover, but it does not work

   .nqulay-sec-section .row:hover>.nqulay-sec-section .row .col-md-9

   {

   color: white !important;

   }

 .nqulay-sec-section .row { cursor: pointer; background: linear-gradient(0deg, #E3EDF7, #E3EDF7); box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8); border-radius: 16px; padding: 32px 60px; margin-bottom: 60px; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .nqulay-sec-section .row:hover { background: linear-gradient(95.69deg, #33AEB7 0%, #3C3C81 100%); box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8); border-radius: 16px; } .nqulay-sec-section .row:hover>.col-md-3>svg>.st0 { stroke: white !important; } /* HERE text inside .col-md-9 should be white on hover, but it does not work */ .nqulay-sec-section .row:hover>.nqulay-sec-section .row .col-md-9 { color: white !important; } .nqulay-sec-section .row .col-md-9 h5 { margin-bottom: 0; font-family: HelveticaNeueCyr; font-style: normal; font-weight: bold; font-size: 24px; line-height: 40px; color: #3B4886 !important; } .nqulay-sec-section .row .col-md-9 p { margin-bottom: 0; font-family: HelveticaNeueCyr; font-style: normal; font-weight: normal; font-size: 16px; line-height: 32px; color: #3B4886 !important; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <section class="nqulay-sec-section p-5"> <div class="row firstbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="92" height="58" viewBox="0 0 92 58" fill="none"> <path stroke="#3B4886" class="st0" opacity="0.9" d="M38.4519 53.4561L38.4529 53.4554C42.2279 50.7154 44.9429 47.2165 46.5873 42.9656C48.2755 38.7397 49.1153 34.0428 49.1153 28.8815C49.1153 23.8231 48.2747 19.2036 46.5854 15.0296C44.8871 10.8333 42.1463 7.36308 38.3739 4.62459C34.6306 1.86806 30.1265 0.5 24.8881 0.5C17.5682 0.5 11.6348 3.10926 7.13599 8.33529L7.13402 8.33759C2.69573 13.557 0.5 20.4482 0.5 28.9605C0.5 36.8468 2.59102 43.591 6.79396 49.1656L6.79536 49.1675C11.0315 54.732 17.0865 57.5 24.8881 57.5C30.1773 57.5 34.7077 56.1598 38.4519 53.4561ZM21.0599 15.0037L21.0666 14.9993L21.0732 14.9947C22.1016 14.2733 23.3643 13.9006 24.8881 13.9006C26.2898 13.9006 27.4801 14.2003 28.4772 14.7805C29.4737 15.3605 30.3052 16.2368 30.9652 17.4333C32.2972 19.8483 32.9942 23.6412 32.9942 28.8815C32.9942 34.0916 32.2782 37.9202 30.9041 40.4298C30.2212 41.6771 29.3813 42.5885 28.3932 43.19C27.4062 43.7909 26.2437 44.0994 24.8881 44.0994C22.1706 44.0994 20.164 42.9436 18.8059 40.5972C17.4237 38.2092 16.7015 34.5629 16.7015 29.5924C16.7015 28.0177 16.7282 26.6835 16.7813 25.5884L16.7814 25.5873C16.8335 24.4616 17.0167 23.0922 17.3355 21.4747L17.3361 21.4718C17.6516 19.8192 18.0935 18.5062 18.6485 17.5151C19.1947 16.54 19.9934 15.7019 21.0599 15.0037ZM91.5 1.55289V1.05289H91H77.6484H77.163L77.1486 1.53814C77.0459 5.01995 75.6176 7.77338 72.8454 9.84034C70.1025 11.8728 66.753 12.9006 62.7686 12.9006H61.2405H60.7405V13.4006V24.9323V25.4323H61.2405H73.7703V56.2891V56.7891H74.2703H91H91.5V56.2891V1.55289Z" /> </svg> </div> <div class="col-md-9"> <h5>Заполнить анкету</h5> <p>Заполнить онлайн анкету</p> </div> </div> <div class="row secondbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="104" height="59" viewBox="0 0 104 59" fill="none"> <path stroke="#3B4886" class="st0" d="M102.8,42.5V57v0.5h-0.5h-48h-0.5V57v-1c0-2.5,0.3-4.9,1-7l0,0l0,0c0.7-2.2,1.7-4.2,3.1-6 c1.4-1.8,2.8-3.4,4.4-4.7c1.6-1.3,9.4-6.6,11.5-8.1 M102.8,43h-0.5l-14,0.1l0,0c-3,0-6.5,0.2-10.5,0.5c1.3-0.9,3.2-1.9,5.2-3.1 l0.7-0.4c3.1-1.7,4.5-2.5,5.6-3.3c2.1-1.4,3.8-2.6,4.9-3.5c1.2-0.9,2.5-2.1,3.8-3.5l0,0l0,0c1.4-1.5,2.3-3.2,2.9-5 c0.6-1.9,0.9-3.9,0.9-6.2c0-5.5-2.1-9.9-6.2-13.2c-4.1-3.4-9.6-5-16.3-5c-7.9,0-14,2-18.2,6.1c-4.1,4-6.2,9.9-6.2,17.5v0.9v0.5h0.5 h15h0.5v-0.5c0.1-3.2,0.7-5.6,1.8-7.3c1.1-1.6,3-2.5,6-2.5c2,0,3.4,0.5,4.5,1.4l0,0l0,0c1.1,0.8,1.6,2,1.7,3.6c0,1-0.2,1.9-0.6,2.7 c-0.4,0.7-1.1,1.5-2.2,2.3c-1,0.8-2.1,1.5-3.3,2.2c-1.2,0.7-2.9,1.6-5,2.9 M82.9,40.5L82.9,40.5 M38.3,54.1L38.3,54.1 c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14S42,7.4,38.2,4.7C34.5,1.9,30,0.5,24.8,0.5 c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0c4.2,5.6,10.2,8.4,18,8.4 C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9c1,0.6,1.8,1.5,2.5,2.7 c1.3,2.4,2,6.3,2,11.6s-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8s-2.1,0.9-3.5,0.9c-2.7,0-4.7-1.2-6-3.5 c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4C19.1,16.7,19.9,15.9,21,15.2z " /> </svg> </div> <div class="col-md-9"> <h5>Решение банка</h5> <p>Узнать предварительное решение</p> </div> </div> <div class="row thirdbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="103" height="59" fill="none"> <path stroke="#3B4886" class="st0" d="M97.2,51.9c-1.5,1.4-3.4,2.6-5.5,3.6l0,0c-2.1,0.9-4.2,1.6-6.4,2c-2.2,0.4-4.5,0.6-6.9,0.6 c-7.2,0-13.1-1.7-17.7-5.1l0,0c-4.6-3.5-6.9-8.7-6.9-15.5c0-0.6,0-1.1,0.1-1.6l0.1-0.4h0.4h15h0.5V36v0.8c0,2.5,0.7,4.3,1.9,5.5 c1.3,1.2,3.2,1.8,5.9,1.8c2.4,0,4.3-0.5,5.5-1.4c1.2-0.9,1.9-2.2,1.9-3.9c0-1.8-0.7-3.1-1.9-4c-1.3-0.9-3.7-1.3-6.6-1.3l-3.1,0H73 V33V22.7v-0.5l2.5,0.1l1.5,0.1c2.8,0,4.9-0.5,6.2-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1.7-0.6-3-1.9-3.9c-1.3-0.9-3.1-1.4-5.5-1.4 c-2.7,0-4.6,0.6-5.9,1.8c-1.3,1.2-1.9,3-1.9,5.5v0.8v0.5l-3.1,0l-11.5,0.2l0-0.5c0.3-6.5,2.4-11.4,6.6-14.6l0,0 c4.2-3.2,9.6-4.8,16.4-4.8C85,0.5,90.4,2,94.5,4.9c4.1,2.9,6.2,6.9,6.2,11.9c0,2.9-0.7,5.3-2.3,7.3 M98.4,24.1 C98.4,24.1,98.4,24.1,98.4,24.1 M98.4,24.1C98.4,24.1,98.4,24.1,98.4,24.1 M99.7,31.1C99.7,31.1,99.7,31.1,99.7,31.1 M99.7,31.1 C99.7,31.1,99.7,31.1,99.7,31.1 M98.4,24.1c-1.1,1.4-2.5,2.5-4.3,3.1c1.2,0.4,3.6,1.5,5.5,3.9c0.3,0.4,1.3,1.7,2,3.8 c0.6,1.9,0.7,3.4,0.7,4.6c0,2.6-0.5,5-1.4,7.2c-0.9,2.1-2.2,3.9-3.8,5.4 M97.2,51.9C97.2,51.9,97.2,51.9,97.2,51.9 M38.3,54.1 L38.3,54.1c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14c-1.7-4.2-4.4-7.8-8.2-10.5 C34.5,1.9,30,0.5,24.8,0.5c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0 c4.2,5.6,10.2,8.4,18,8.4C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9 c1,0.6,1.8,1.5,2.5,2.7c1.3,2.4,2,6.3,2,11.6c0,5.3-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8c-1,0.6-2.1,0.9-3.5,0.9 c-2.7,0-4.7-1.2-6-3.5c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4 C19.1,16.7,19.9,15.9,21,15.2z" /> </svg> </div> <div class="col-md-9"> <h5>Получить карту</h5> <p>В магазинах партнеров или в любом отделении банка</p> </div> </div> </section>

Answer 1

Edit Your CSS like

.nqulay-sec-section .row .col-md-9 h5 {
  margin-bottom: 0;
  font-family: HelveticaNeueCyr;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 40px;
  color: #3B4886 !important;
}

.nqulay-sec-section .row .col-md-9 p {
  margin-bottom: 0;
  font-family: HelveticaNeueCyr;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 32px;
  color: #3B4886 !important;
}

/* HERE text inside .col-md-9 should be white on hover, but it does not work */

.nqulay-sec-section .row:hover .col-md-9 h5, .nqulay-sec-section .row:hover .col-md-9 p {
  color: white !important;
}

 .nqulay-sec-section .row { cursor: pointer; background: linear-gradient(0deg, #E3EDF7, #E3EDF7); box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8); border-radius: 16px; padding: 32px 60px; margin-bottom: 60px; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .nqulay-sec-section .row:hover { background: linear-gradient(95.69deg, #33AEB7 0%, #3C3C81 100%); box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8); border-radius: 16px; } .nqulay-sec-section .row:hover .col-md-3 svg .st0 { stroke: white !important; } .nqulay-sec-section .row .col-md-9 h5 { margin-bottom: 0; font-family: HelveticaNeueCyr; font-style: normal; font-weight: bold; font-size: 24px; line-height: 40px; color: #3B4886 !important; } .nqulay-sec-section .row .col-md-9 p { margin-bottom: 0; font-family: HelveticaNeueCyr; font-style: normal; font-weight: normal; font-size: 16px; line-height: 32px; color: #3B4886 !important; } /* HERE text inside .col-md-9 should be white on hover, but it does not work */ .nqulay-sec-section .row:hover .col-md-9 h5, .nqulay-sec-section .row:hover .col-md-9 p { color: white !important; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <section class="nqulay-sec-section p-5"> <div class="row firstbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="92" height="58" viewBox="0 0 92 58" fill="none"> <path stroke="#3B4886" class="st0" opacity="0.9" d="M38.4519 53.4561L38.4529 53.4554C42.2279 50.7154 44.9429 47.2165 46.5873 42.9656C48.2755 38.7397 49.1153 34.0428 49.1153 28.8815C49.1153 23.8231 48.2747 19.2036 46.5854 15.0296C44.8871 10.8333 42.1463 7.36308 38.3739 4.62459C34.6306 1.86806 30.1265 0.5 24.8881 0.5C17.5682 0.5 11.6348 3.10926 7.13599 8.33529L7.13402 8.33759C2.69573 13.557 0.5 20.4482 0.5 28.9605C0.5 36.8468 2.59102 43.591 6.79396 49.1656L6.79536 49.1675C11.0315 54.732 17.0865 57.5 24.8881 57.5C30.1773 57.5 34.7077 56.1598 38.4519 53.4561ZM21.0599 15.0037L21.0666 14.9993L21.0732 14.9947C22.1016 14.2733 23.3643 13.9006 24.8881 13.9006C26.2898 13.9006 27.4801 14.2003 28.4772 14.7805C29.4737 15.3605 30.3052 16.2368 30.9652 17.4333C32.2972 19.8483 32.9942 23.6412 32.9942 28.8815C32.9942 34.0916 32.2782 37.9202 30.9041 40.4298C30.2212 41.6771 29.3813 42.5885 28.3932 43.19C27.4062 43.7909 26.2437 44.0994 24.8881 44.0994C22.1706 44.0994 20.164 42.9436 18.8059 40.5972C17.4237 38.2092 16.7015 34.5629 16.7015 29.5924C16.7015 28.0177 16.7282 26.6835 16.7813 25.5884L16.7814 25.5873C16.8335 24.4616 17.0167 23.0922 17.3355 21.4747L17.3361 21.4718C17.6516 19.8192 18.0935 18.5062 18.6485 17.5151C19.1947 16.54 19.9934 15.7019 21.0599 15.0037ZM91.5 1.55289V1.05289H91H77.6484H77.163L77.1486 1.53814C77.0459 5.01995 75.6176 7.77338 72.8454 9.84034C70.1025 11.8728 66.753 12.9006 62.7686 12.9006H61.2405H60.7405V13.4006V24.9323V25.4323H61.2405H73.7703V56.2891V56.7891H74.2703H91H91.5V56.2891V1.55289Z" /> </svg> </div> <div class="col-md-9"> <h5>Заполнить анкету</h5> <p>Заполнить онлайн анкету</p> </div> </div> <div class="row secondbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="104" height="59" viewBox="0 0 104 59" fill="none"> <path stroke="#3B4886" class="st0" d="M102.8,42.5V57v0.5h-0.5h-48h-0.5V57v-1c0-2.5,0.3-4.9,1-7l0,0l0,0c0.7-2.2,1.7-4.2,3.1-6 c1.4-1.8,2.8-3.4,4.4-4.7c1.6-1.3,9.4-6.6,11.5-8.1 M102.8,43h-0.5l-14,0.1l0,0c-3,0-6.5,0.2-10.5,0.5c1.3-0.9,3.2-1.9,5.2-3.1 l0.7-0.4c3.1-1.7,4.5-2.5,5.6-3.3c2.1-1.4,3.8-2.6,4.9-3.5c1.2-0.9,2.5-2.1,3.8-3.5l0,0l0,0c1.4-1.5,2.3-3.2,2.9-5 c0.6-1.9,0.9-3.9,0.9-6.2c0-5.5-2.1-9.9-6.2-13.2c-4.1-3.4-9.6-5-16.3-5c-7.9,0-14,2-18.2,6.1c-4.1,4-6.2,9.9-6.2,17.5v0.9v0.5h0.5 h15h0.5v-0.5c0.1-3.2,0.7-5.6,1.8-7.3c1.1-1.6,3-2.5,6-2.5c2,0,3.4,0.5,4.5,1.4l0,0l0,0c1.1,0.8,1.6,2,1.7,3.6c0,1-0.2,1.9-0.6,2.7 c-0.4,0.7-1.1,1.5-2.2,2.3c-1,0.8-2.1,1.5-3.3,2.2c-1.2,0.7-2.9,1.6-5,2.9 M82.9,40.5L82.9,40.5 M38.3,54.1L38.3,54.1 c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14S42,7.4,38.2,4.7C34.5,1.9,30,0.5,24.8,0.5 c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0c4.2,5.6,10.2,8.4,18,8.4 C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9c1,0.6,1.8,1.5,2.5,2.7 c1.3,2.4,2,6.3,2,11.6s-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8s-2.1,0.9-3.5,0.9c-2.7,0-4.7-1.2-6-3.5 c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4C19.1,16.7,19.9,15.9,21,15.2z " /> </svg> </div> <div class="col-md-9"> <h5>Решение банка</h5> <p>Узнать предварительное решение</p> </div> </div> <div class="row thirdbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="103" height="59" fill="none"> <path stroke="#3B4886" class="st0" d="M97.2,51.9c-1.5,1.4-3.4,2.6-5.5,3.6l0,0c-2.1,0.9-4.2,1.6-6.4,2c-2.2,0.4-4.5,0.6-6.9,0.6 c-7.2,0-13.1-1.7-17.7-5.1l0,0c-4.6-3.5-6.9-8.7-6.9-15.5c0-0.6,0-1.1,0.1-1.6l0.1-0.4h0.4h15h0.5V36v0.8c0,2.5,0.7,4.3,1.9,5.5 c1.3,1.2,3.2,1.8,5.9,1.8c2.4,0,4.3-0.5,5.5-1.4c1.2-0.9,1.9-2.2,1.9-3.9c0-1.8-0.7-3.1-1.9-4c-1.3-0.9-3.7-1.3-6.6-1.3l-3.1,0H73 V33V22.7v-0.5l2.5,0.1l1.5,0.1c2.8,0,4.9-0.5,6.2-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1.7-0.6-3-1.9-3.9c-1.3-0.9-3.1-1.4-5.5-1.4 c-2.7,0-4.6,0.6-5.9,1.8c-1.3,1.2-1.9,3-1.9,5.5v0.8v0.5l-3.1,0l-11.5,0.2l0-0.5c0.3-6.5,2.4-11.4,6.6-14.6l0,0 c4.2-3.2,9.6-4.8,16.4-4.8C85,0.5,90.4,2,94.5,4.9c4.1,2.9,6.2,6.9,6.2,11.9c0,2.9-0.7,5.3-2.3,7.3 M98.4,24.1 C98.4,24.1,98.4,24.1,98.4,24.1 M98.4,24.1C98.4,24.1,98.4,24.1,98.4,24.1 M99.7,31.1C99.7,31.1,99.7,31.1,99.7,31.1 M99.7,31.1 C99.7,31.1,99.7,31.1,99.7,31.1 M98.4,24.1c-1.1,1.4-2.5,2.5-4.3,3.1c1.2,0.4,3.6,1.5,5.5,3.9c0.3,0.4,1.3,1.7,2,3.8 c0.6,1.9,0.7,3.4,0.7,4.6c0,2.6-0.5,5-1.4,7.2c-0.9,2.1-2.2,3.9-3.8,5.4 M97.2,51.9C97.2,51.9,97.2,51.9,97.2,51.9 M38.3,54.1 L38.3,54.1c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14c-1.7-4.2-4.4-7.8-8.2-10.5 C34.5,1.9,30,0.5,24.8,0.5c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0 c4.2,5.6,10.2,8.4,18,8.4C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9 c1,0.6,1.8,1.5,2.5,2.7c1.3,2.4,2,6.3,2,11.6c0,5.3-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8c-1,0.6-2.1,0.9-3.5,0.9 c-2.7,0-4.7-1.2-6-3.5c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4 C19.1,16.7,19.9,15.9,21,15.2z" /> </svg> </div> <div class="col-md-9"> <h5>Получить карту</h5> <p>В магазинах партнеров или в любом отделении банка</p> </div> </div> </section>

Answer 2

 .nqulay-sec-section .row { cursor: pointer; background: linear-gradient(0deg, #E3EDF7, #E3EDF7); box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8); border-radius: 16px; padding: 32px 60px; margin-bottom: 60px; -moz-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .nqulay-sec-section .row:hover { background: linear-gradient(95.69deg, #33AEB7 0%, #3C3C81 100%); box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8); border-radius: 16px; } .st0{ stroke: #3B4886 } .nqulay-sec-section .row:hover svg>.st0 { stroke: #fff; } /* HERE text inside .col-md-9 should be white on hover, but it does not work */ .nqulay-sec-section .row:hover>.nqulay-sec-section .row .col-md-9 { color: white !important; } .nqulay-sec-section .row .col-md-9 h5 { margin-bottom: 0; font-family: HelveticaNeueCyr; font-style: normal; font-weight: bold; font-size: 24px; line-height: 40px; color: #3B4886; } .nqulay-sec-section .row .col-md-9 p { margin-bottom: 0; font-family: HelveticaNeueCyr; font-style: normal; font-weight: normal; font-size: 16px; line-height: 32px; color: #3B4886; } .nqulay-sec-section .row:hover .col-md-9 h5,.nqulay-sec-section .row:hover .col-md-9 p { color: #fff !important; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <section class="nqulay-sec-section p-5"> <div class="row firstbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="92" height="58" viewBox="0 0 92 58" fill="none"> <path stroke="#3B4886" class="st0" opacity="0.9" d="M38.4519 53.4561L38.4529 53.4554C42.2279 50.7154 44.9429 47.2165 46.5873 42.9656C48.2755 38.7397 49.1153 34.0428 49.1153 28.8815C49.1153 23.8231 48.2747 19.2036 46.5854 15.0296C44.8871 10.8333 42.1463 7.36308 38.3739 4.62459C34.6306 1.86806 30.1265 0.5 24.8881 0.5C17.5682 0.5 11.6348 3.10926 7.13599 8.33529L7.13402 8.33759C2.69573 13.557 0.5 20.4482 0.5 28.9605C0.5 36.8468 2.59102 43.591 6.79396 49.1656L6.79536 49.1675C11.0315 54.732 17.0865 57.5 24.8881 57.5C30.1773 57.5 34.7077 56.1598 38.4519 53.4561ZM21.0599 15.0037L21.0666 14.9993L21.0732 14.9947C22.1016 14.2733 23.3643 13.9006 24.8881 13.9006C26.2898 13.9006 27.4801 14.2003 28.4772 14.7805C29.4737 15.3605 30.3052 16.2368 30.9652 17.4333C32.2972 19.8483 32.9942 23.6412 32.9942 28.8815C32.9942 34.0916 32.2782 37.9202 30.9041 40.4298C30.2212 41.6771 29.3813 42.5885 28.3932 43.19C27.4062 43.7909 26.2437 44.0994 24.8881 44.0994C22.1706 44.0994 20.164 42.9436 18.8059 40.5972C17.4237 38.2092 16.7015 34.5629 16.7015 29.5924C16.7015 28.0177 16.7282 26.6835 16.7813 25.5884L16.7814 25.5873C16.8335 24.4616 17.0167 23.0922 17.3355 21.4747L17.3361 21.4718C17.6516 19.8192 18.0935 18.5062 18.6485 17.5151C19.1947 16.54 19.9934 15.7019 21.0599 15.0037ZM91.5 1.55289V1.05289H91H77.6484H77.163L77.1486 1.53814C77.0459 5.01995 75.6176 7.77338 72.8454 9.84034C70.1025 11.8728 66.753 12.9006 62.7686 12.9006H61.2405H60.7405V13.4006V24.9323V25.4323H61.2405H73.7703V56.2891V56.7891H74.2703H91H91.5V56.2891V1.55289Z" /> </svg> </div> <div class="col-md-9"> <h5>Заполнить анкету</h5> <p>Заполнить онлайн анкету</p> </div> </div> <div class="row secondbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="104" height="59" viewBox="0 0 104 59" fill="none"> <path stroke="#3B4886" class="st0" d="M102.8,42.5V57v0.5h-0.5h-48h-0.5V57v-1c0-2.5,0.3-4.9,1-7l0,0l0,0c0.7-2.2,1.7-4.2,3.1-6 c1.4-1.8,2.8-3.4,4.4-4.7c1.6-1.3,9.4-6.6,11.5-8.1 M102.8,43h-0.5l-14,0.1l0,0c-3,0-6.5,0.2-10.5,0.5c1.3-0.9,3.2-1.9,5.2-3.1 l0.7-0.4c3.1-1.7,4.5-2.5,5.6-3.3c2.1-1.4,3.8-2.6,4.9-3.5c1.2-0.9,2.5-2.1,3.8-3.5l0,0l0,0c1.4-1.5,2.3-3.2,2.9-5 c0.6-1.9,0.9-3.9,0.9-6.2c0-5.5-2.1-9.9-6.2-13.2c-4.1-3.4-9.6-5-16.3-5c-7.9,0-14,2-18.2,6.1c-4.1,4-6.2,9.9-6.2,17.5v0.9v0.5h0.5 h15h0.5v-0.5c0.1-3.2,0.7-5.6,1.8-7.3c1.1-1.6,3-2.5,6-2.5c2,0,3.4,0.5,4.5,1.4l0,0l0,0c1.1,0.8,1.6,2,1.7,3.6c0,1-0.2,1.9-0.6,2.7 c-0.4,0.7-1.1,1.5-2.2,2.3c-1,0.8-2.1,1.5-3.3,2.2c-1.2,0.7-2.9,1.6-5,2.9 M82.9,40.5L82.9,40.5 M38.3,54.1L38.3,54.1 c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14S42,7.4,38.2,4.7C34.5,1.9,30,0.5,24.8,0.5 c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0c4.2,5.6,10.2,8.4,18,8.4 C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9c1,0.6,1.8,1.5,2.5,2.7 c1.3,2.4,2,6.3,2,11.6s-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8s-2.1,0.9-3.5,0.9c-2.7,0-4.7-1.2-6-3.5 c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4C19.1,16.7,19.9,15.9,21,15.2z " /> </svg> </div> <div class="col-md-9"> <h5>Решение банка</h5> <p>Узнать предварительное решение</p> </div> </div> <div class="row thirdbtn align-items-center"> <div class="col-md-3"> <svg xmlns="http://www.w3.org/2000/svg" width="103" height="59" fill="none"> <path class="st0" d="M97.2,51.9c-1.5,1.4-3.4,2.6-5.5,3.6l0,0c-2.1,0.9-4.2,1.6-6.4,2c-2.2,0.4-4.5,0.6-6.9,0.6 c-7.2,0-13.1-1.7-17.7-5.1l0,0c-4.6-3.5-6.9-8.7-6.9-15.5c0-0.6,0-1.1,0.1-1.6l0.1-0.4h0.4h15h0.5V36v0.8c0,2.5,0.7,4.3,1.9,5.5 c1.3,1.2,3.2,1.8,5.9,1.8c2.4,0,4.3-0.5,5.5-1.4c1.2-0.9,1.9-2.2,1.9-3.9c0-1.8-0.7-3.1-1.9-4c-1.3-0.9-3.7-1.3-6.6-1.3l-3.1,0H73 V33V22.7v-0.5l2.5,0.1l1.5,0.1c2.8,0,4.9-0.5,6.2-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1.7-0.6-3-1.9-3.9c-1.3-0.9-3.1-1.4-5.5-1.4 c-2.7,0-4.6,0.6-5.9,1.8c-1.3,1.2-1.9,3-1.9,5.5v0.8v0.5l-3.1,0l-11.5,0.2l0-0.5c0.3-6.5,2.4-11.4,6.6-14.6l0,0 c4.2-3.2,9.6-4.8,16.4-4.8C85,0.5,90.4,2,94.5,4.9c4.1,2.9,6.2,6.9,6.2,11.9c0,2.9-0.7,5.3-2.3,7.3 M98.4,24.1 C98.4,24.1,98.4,24.1,98.4,24.1 M98.4,24.1C98.4,24.1,98.4,24.1,98.4,24.1 M99.7,31.1C99.7,31.1,99.7,31.1,99.7,31.1 M99.7,31.1 C99.7,31.1,99.7,31.1,99.7,31.1 M98.4,24.1c-1.1,1.4-2.5,2.5-4.3,3.1c1.2,0.4,3.6,1.5,5.5,3.9c0.3,0.4,1.3,1.7,2,3.8 c0.6,1.9,0.7,3.4,0.7,4.6c0,2.6-0.5,5-1.4,7.2c-0.9,2.1-2.2,3.9-3.8,5.4 M97.2,51.9C97.2,51.9,97.2,51.9,97.2,51.9 M38.3,54.1 L38.3,54.1c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14c-1.7-4.2-4.4-7.8-8.2-10.5 C34.5,1.9,30,0.5,24.8,0.5c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0 c4.2,5.6,10.2,8.4,18,8.4C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9 c1,0.6,1.8,1.5,2.5,2.7c1.3,2.4,2,6.3,2,11.6c0,5.3-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8c-1,0.6-2.1,0.9-3.5,0.9 c-2.7,0-4.7-1.2-6-3.5c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4 C19.1,16.7,19.9,15.9,21,15.2z" /> </svg> </div> <div class="col-md-9"> <h5>Получить карту</h5> <p>В магазинах партнеров или в любом отделении банка</p> </div> </div> </section>