x
<html><head><style>.container { position: relative; width: 50%;}.image { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden;}.middle { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform: translate(-50%, -50%)}.container:hover .image { opacity: 0.3;}.container:hover .middle { opacity: 1;}.text { background-color: #4CAF50; color: white; font-size: 16px; padding: 16px 32px;}</style></head><body><h2>Исчезнуть в блоке</h2><div class="container"> <img src="../images/img_avatar.png" alt="Аватар" class="image" style="width:100%"> <div class="middle"> <div class="text">John Doe</div> </div></div></body></html>