<div class="blockMan">
  <ul class="hr1">
    <li><p><img src="/home/evgeniy/Рабочий стол/test 2/img/dauni.jpg" alt="" /></p><p class="summary"><b>text text<br>text</b><br>text texttext texttext texttext text</p></li>
    <li><p><img src="/home/evgeniy/Рабочий стол/test 2/img/kris.jpg" alt="" /></p><p class="summary"><b>text text<br>text</b><br>text texttext texttext texttext text</p></li>
    <li><p><img src="/home/evgeniy/Рабочий стол/test 2/img/skarlet.jpg" alt="" /></p><p class="summary"><b>text text<br>text</b><br>text texttext texttext texttext text</p></li>
    <li><p><img src="/home/evgeniy/Рабочий стол/test 2/img/tor.jpg" alt="" /></p><p class="summary"><b>text text<br>text</b><br>text texttext texttext texttext text</p></li>
</div>

.blockMan {
 width: 100%;
 min-height: 600px;
 }

 ul.hr1 {
 margin-top: 80px;
 }

  ul.hr1 li {
  width: 14%;
  margin-left: 126px;
  display: inline-block;
  position: relative;
  order: 1;
  text-align: center;
  }

  .summary {
   opacity: 0;
  }

   ul.hr1 li:hover,
  .summary:hover {
   background-color: green;
   opacity: 1;