JSFiddle - React, Tailwind, and code Playground

by Paolo Basso

HTML

<div class="secondBlock">
  <ul>
    <li>
      <a href="" class="secondLinks secondLink1"><img src="http://www.placehold.it/32/32" class="imageList">Главная</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink2"><img src="http://www.placehold.it/32/32" class="imageList">Служба</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink3"><img src="http://www.placehold.it/32/32" class="imageList">Рендзина</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink4"><img src="http://www.placehold.it/32/32" class="imageList">Солеперенос</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink5"><img src="http://www.placehold.it/32/32" class="imageList">Медиапланировние</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink6"><img src="http://www.placehold.it/32/32" class="imageList">Таргетирование</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink7"><img src="http://www.placehold.it/32/32" class="imageList">Позиционирование</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink8"><img src="http://www.placehold.it/32/32" class="imageList">Медиамикс</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink9"><img src="http://www.placehold.it/32/32" class="imageList">Законодательство</a>
    </li>
    <li>
      <a href="" class="secondLinks secondLink10"><img src="http://www.placehold.it/32/32" class="imageList">Жеода</a>
    </li>
  </ul>

CSS

.secondBlock {
  border-bottom: solid black 1px;
  height: 260px;
  text-decoration: none;
}
.secondBlock a {
  color:rgba(0,0,0,1);
}

.secondBlock:hover li a {
  color:rgba(0,0,0,0.5);
}

.secondBlock:hover li a img {
  opacity:0.5;
}

.secondBlock ul li a:hover {
  color:rgba(0,0,0,1);
}
.secondBlock ul li a:hover > img {
  opacity:1;
}