Как реализовать спрайты не через свойство background?

294

06 декабря 2021, 00:40

Никак не могу совладать с одним из элементов при вёрстке. Прошу, собственно, Вашей помощи.

Вопрос: Как реализовать спрайты внутри подобного блока?

Должно быть вот так (в состоянии покоя):

Это состояние hover

Я пробовал через абсолютное позиционирование элемента с иконкой, но размер у каждой из иконок разные (одна из проблем). Кроме этого, хотелось бы имет возможность управлять иконками на стороне CMS, т.е. обойтись без "background".

Сейчас я "добился" вот этого (спокойное состояние):

Hover:

Собственно, разметка не позволяет мне показывать только часть иконки. Идей пока нету, надеюсь, Вы подскажете, как можно решить эту проблему.

.pageservices { 
  padding: 4rem 0; 
  background: #3d3d3d; 
} 
 
.pageservices h3 { 
  text-align: center; 
  color: #fff; 
} 
 
.pageservices h3::after { 
  content: ''; 
  width: 150px; 
  height: 2px; 
  background-color: #7cd3ac; 
  display: block; 
  margin: .6rem auto 4rem auto; 
} 
 
.pageservices .pageservices__item { 
  margin: 0 1rem; 
  background-color: #fff; 
  padding: 1rem 1rem; 
  margin-bottom: 1rem; 
  color: #000; 
  position: relative; 
  min-height: 200px; 
  transition: all .5s ease; 
} 
 
.pageservices .pageservices__item .pageservices__inner { 
  background-position: right bottom; 
  min-height: 168px; 
  height: 100%; 
  background-repeat: no-repeat; 
} 
 
.pageservices .pageservices__item .pageservices__inner .pageservices__title { 
  display: -ms-flexbox; 
  display: flex; 
  margin-bottom: 1rem; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
} 
 
.pageservices .pageservices__item .pageservices__inner .pageservices__title a { 
  color: #000; 
} 
 
.pageservices .pageservices__item .pageservices__inner .pageservices__title a:hover { 
  color: #7cd3ac; 
} 
 
.pageservices .pageservices__item .pageservices__inner .pageservices__title .fas { 
  line-height: 1.5rem; 
} 
 
.pageservices .pageservices__item .pageservices__inner .pageservices__info { 
  text-align: justify; 
  color: #000; 
} 
 
.pageservices .pageservices__item:hover { 
  background-color: #7cd3ac; 
  color: #fff; 
  transition: all .5s ease; 
} 
 
.pageservices .pageservices__item:hover .pageservices__inner .pageservices__title a { 
  color: #fff; 
} 
 
.pageservices .pageservices__item:hover .pageservices__inner .pageservices__title a:hover { 
  color: #fff; 
} 
 
.pageservices .pageservices__item:hover .pageservices__inner .pageservices__info { 
  color: #fff; 
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 
 
<section class="container-fluid pageservices"> 
  <div class="container"> 
    <h3>Услуги</h3> 
    <div class="row"> 
      <div class="col-sm-12 col-md-4 col-lg-4"> 
        <div class="pageservices__item"> 
          <div class="pageservices__inner" style="background-image: url('http://nova.expnk.ru/pageservices-icons1.png');"> 
            <div class="pageservices__title"> 
              <a href="#">Тестовый заголовок</a><i class="fas fa-arrow-right"></i> 
            </div> 
            <div class="pageservices__info"> 
              <p>Nobis reprehenderit optio et eligendi numquam?</p> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-12 col-md-4 col-lg-4"> 
        <div class="pageservices__item"> 
          <div class="pageservices__inner" style="background-image: url('http://nova.expnk.ru/pageservices-icons1.png');"> 
            <div class="pageservices__title"> 
              <a href="#">Тестовый заголовок</a><i class="fas fa-arrow-right"></i> 
            </div> 
            <div class="pageservices__info"> 
              <p>Nobis reprehenderit optio et eligendi numquam?</p> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-12 col-md-4 col-lg-4"> 
        <div class="pageservices__item"> 
          <div class="pageservices__inner" style="background-image: url('http://nova.expnk.ru/pageservices-icons1.png');"> 
            <div class="pageservices__title"> 
              <a href="#">Тестовый заголовок</a><i class="fas fa-arrow-right"></i> 
            </div> 
            <div class="pageservices__info"> 
              <p>Nobis reprehenderit optio et eligendi numquam?</p> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-12 col-md-4 col-lg-4"> 
        <div class="pageservices__item"> 
          <div class="pageservices__inner" style="background-image: url('http://nova.expnk.ru/pageservices-icons1.png');"> 
            <div class="pageservices__title"> 
              <a href="#">Тестовый заголовок</a><i class="fas fa-arrow-right"></i> 
            </div> 
            <div class="pageservices__info"> 
              <p>Nobis reprehenderit optio et eligendi numquam?</p> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-12 col-md-4 col-lg-4"> 
        <div class="pageservices__item"> 
          <div class="pageservices__inner" style="background-image: url(http://nova.expnk.ru/pageservices-icons1.png);"> 
            <div class="pageservices__title"> 
              <a href="#">Тестовый заголовок</a><i class="fas fa-arrow-right"></i> 
            </div> 
            <div class="pageservices__info"> 
              <p>Nobis reprehenderit optio et eligendi numquam?</p> 
            </div> 
          </div> 
        </div> 
      </div> 
      <div class="col-sm-12 col-md-4 col-lg-4"> 
        <div class="pageservices__item"> 
          <div class="pageservices__inner" style="background-image: url(http://nova.expnk.ru/pageservices-icons1.png);"> 
            <div class="pageservices__title"> 
              <a href="#">Тестовый заголовок</a><i class="fas fa-arrow-right"></i> 
            </div> 
            <div class="pageservices__info"> 
              <p>Nobis reprehenderit optio et eligendi numquam?</p> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</section>

Честно, не пойму, почему не подгружается картинка по абсолютному пути. Надеюсь, такого кода будет достаточно. Заранее благодарю.