Hid the text when under the photo using opacity and how to display it now when you hover on the photo itself and not only on this invisible text.

html

.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; } 
 <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> </ul> </div>

  • one
    render img from p so that the picture and the text block are at the same nesting level (there is no need to wrap img in p ) and register img:hover + .summary {opacity: 1} - lexxl

1 answer 1

 .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 { background-color: green; opacity: 1; } 
 <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> </ul> </div>

  • Thanks a lot helped! - Evgeny Lyubimov