Картинка с всплывающим текстом:
[html]<style>
.grid-img {display: grid;width: min-content;}
.grid-img img, .grid-img div {grid-area: 1 / 1;transition: all 1.7s linear;}
.grid-img div {color: #000000;text-align: center;opacity: 0;}
.grid-img:hover div {
  color: #000000;
  text-shadow:
    -0.2px -0.2px 0 #000000,
    0.2px -0.2px 0 #000000,
    -0.2px 0.2px 0 #000000,
    0.2px 0.2px 0 #000000;
  letter-spacing: 0.9px;
  opacity: 1;
}
.grid-img:hover img {opacity: 0.4;}
</style>
<div class="grid-img">
  <div>здесь текста много</div>
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
</div>[/html]

Код:
<style>
.grid-img {display: grid;width: min-content;}
.grid-img img, .grid-img div {grid-area: 1 / 1;transition: all 1.7s linear;}
.grid-img div {color: #000000;text-align: center;opacity: 0;}
.grid-img:hover div {
  color: #000000;
  text-shadow:
    -0.2px -0.2px 0 #000000,
    0.2px -0.2px 0 #000000,
    -0.2px 0.2px 0 #000000,
    0.2px 0.2px 0 #000000;
  letter-spacing: 0.9px;
  opacity: 1;
}
.grid-img:hover img {opacity: 0.4;}
</style>
<div class="grid-img">
  <div>здесь текста много</div>
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
</div>

Смена картинок при наведении:

Код:
<!-- Смена картинок при наведении с анимацией -->
<style>
.grid-img {display: grid;width: min-content;}
.grid-img img {grid-area: 1 / 1;transition: all 1.7s linear;width: 150px; height: 150px; object-fit: cover;}
.grid-img img:nth-child(1) {opacity: 1;}
.grid-img img:nth-child(2) {opacity: 0;}
.grid-img:hover img:nth-child(1) {opacity: 0;}
.grid-img:hover img:nth-child(2) {opacity: 1;}
</style>
<div class="grid-img">
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/22787-1631443477.png" alt="">
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
</div>

Пример:
[html]
<!-- Смена картинок при наведении с анимацией -->
<style>
.grid-img {display: grid;width: min-content;}
.grid-img img {grid-area: 1 / 1;transition: all 1.7s linear;width: 150px; height: 150px; object-fit: cover;}
.grid-img img:nth-child(1) {opacity: 1;}
.grid-img img:nth-child(2) {opacity: 0;}
.grid-img:hover img:nth-child(1) {opacity: 0;}
.grid-img:hover img:nth-child(2) {opacity: 1;}
</style>
<div class="grid-img">
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/22787-1631443477.png" alt="">
  <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
</div>[/html]
Ширину и высоту ставим свою, если картинка других пропорций, то картинка будет обрезаться, а не искажаться..

И для аватарки в минипрофиле:

Смена картинок при наведении для аватарки

Код:
<!-- Смена картинок при наведении для аватарки -->
<style>
.pa-avatar {display: grid;width: min-content;}
.pa-avatar img {grid-area: 1 / 1;transition: all 1.7s linear;width: 150px; height: 150px; object-fit: cover;}
.pa-avatar img:nth-child(1) {opacity: 1;}
.pa-avatar img:nth-child(2) {opacity: 0;}
.pa-avatar:hover img:nth-child(1) {opacity: 0;}
.pa-avatar:hover img:nth-child(2) {opacity: 1;}
</style>
<script>
$('.pa-avatar img').after('<img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">');
</script>

Текст для аватарки при наведении

Код:
<!-- Текст для аватарки при наведении -->
<style>
.pa-avatar {display: grid;width: min-content;}
.pa-avatar img, .pa-avatar div {grid-area: 1 / 1;transition: all 1.7s linear;width: 150px; height: 150px; object-fit: cover;}
.pa-avatar div {color: #000000;text-align: center;opacity: 0;}
.pa-avatar:hover div {
  color: #F0FFFF;
  text-shadow:
    -0.2px -0.2px 0 #000000,
    0.2px -0.2px 0 #000000,
    -0.2px 0.2px 0 #000000,
    0.2px 0.2px 0 #000000;
  letter-spacing: 0.9px;
  opacity: 1;
}
.grid-img:hover img {opacity: 0.4;}
</style>
<script>
$('.pa-avatar img').after('<div>здесь текста много</div>');
</script>

Ставить в НТМЛ низ.