Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Архив » Картинка со всплывающим текстом

Картинка со всплывающим текстом

Страница: 1

Сообщений 1 страница 8 из 8

Перевести1

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

Видела эффект при наведении на картинку она немного темнеет и поверх неё появляется текст.
То есть не как здесь: Картинка с всплывающим текстом
А конкретно поверх изображения.
Может кто подскажет?

Ссылка: http://umyth.rusff.me/

0

Перевести2

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51726
  • Уважение: +15541
  • Позитив: +12348
  • Последний визит:
    Сегодня 13:17:57

мятный чай
Ну как то так:

Код:
<style>
.wrp {
  width:239px;
  height:239px;
  background:url(//upforme.ru/uploads/0000/14/1c/22787/223252.jpg);
  border-radius:50%;
}
.wrp .cnt{
  box-sizing:border-box;
  padding:12px;
  height:100%;
  opacity:0;
  color:#fff;
  background:rgba(0,0,0,.5);
  border-radius:50%;
  transition:1.7s;
}
.wrp:hover .cnt{
  opacity:1;
}
</style>
<div class="wrp"><pre class="cnt"><!-- Ваш Текст-->
  Бла-бла-бла
  Бла-бла-бла
  Бла-бла-бла
  Бла-бла-бла
</pre></div>

Вид:

http://upforme.ru/uploads/0000/14/1c/22787/969559.gif

+4

Перевести3

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

Deff
Благодарю.
Это же можно в объявление поставить?

0

Перевести4

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51726
  • Уважение: +15541
  • Позитив: +12348
  • Последний визит:
    Сегодня 13:17:57
мятный чай написал(а):

Это же можно в объявление поставить?

Ну наверно обернуть в теги <center></center>

Текст отображается ровно так - как ты его расположишь (отступами и переводами строк) (без тегов <br>

Отредактировано Deff (Пн, 19 Июл 2021 22:03:54)

+1

Перевести5

  • Автор: мятный чай
  • Заслуженный
  • мятный чай
  • Зарегистрирован: Пт, 3 Авг 2018
  • Сообщений: 99
  • Уважение: +28
  • Позитив: +45
  • Последний визит:
    Вс, 19 Янв 2025 14:56:52

Deff
Всё встало как надо, огромное вам спасибо ))

+1

Перевести6

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7573
  • Уважение: +6116
  • Позитив: +6679
  • Пол: Мужской
  • Последний визит:
    Вчера 14:50:49
мятный чай написал(а):

Видела эффект при наведении на картинку она немного темнеет и поверх неё появляется текст.
То есть не как здесь: Картинка с всплывающим текстом
А конкретно поверх изображения.
Может кто подскажет?

Так:
[html]<style>
.grid-img {display: grid;width: min-content;}
.grid-img img {grid-area: 1 / 1;}
.grid-img div {grid-area: 1 / 1;color: rgba(0, 0, 0, 0);}
.grid-img img:hover {opacity: 0.4;}
.grid-img img:hover + div {color: rgba(0, 0, 0, 1);font-weight: 600;}
</style>
<div class="grid-img">
   <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
   <div>здесь текста много</div>
</div>[/html]

Тестируйте:

Код:
<style>
.grid-img {display: grid;width: min-content;}
.grid-img img {grid-area: 1 / 1;}
.grid-img div {grid-area: 1 / 1;color: rgba(0, 0, 0, 0);}
.grid-img img:hover {opacity: 0.4;}
.grid-img img:hover + div {color: rgba(0, 0, 0, 1);font-weight: 600;}
</style>
<div class="grid-img">
   <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">
   <div>здесь текста много</div>
</div>

Вместо моей аватарки ссылку на свою картинку: <img src="https://forumavatars.ru/img/avatars/0000/14/1c/23723-1429784059.gif" alt="">

А, я опоздал)))

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

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

Отредактировано kolobdur74 (Вт, 20 Июл 2021 00:39:39)

+7

Перевести7

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7573
  • Уважение: +6116
  • Позитив: +6679
  • Пол: Мужской
  • Последний визит:
    Вчера 14:50:49

Еще вариант смена картинок при наведении:

Код:
<!-- Смена картинок при наведении с анимацией -->
<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]
Ширину и высоту ставим свою, если картинка других пропорций, то картинка будет обрезаться, а не искажаться..

Отредактировано kolobdur74 (Вс, 26 Сен 2021 01:23:53)

+2

Перевести8

  • Автор: kolobdur74
  • ...
  • kolobdur74
  • Зарегистрирован: Пн, 6 Сен 2010
  • Сообщений: 7573
  • Уважение: +6116
  • Позитив: +6679
  • Пол: Мужской
  • Последний визит:
    Вчера 14:50:49

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

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

Код:
<!-- Смена картинок при наведении для аватарки -->
<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>

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

+1

Страница: 1

Вы здесь » Единый форум поддержки » Архив » Картинка со всплывающим текстом