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

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

Поделиться1Пн, 19 Июл 2021 20:57:37

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 97
Уважение: +27
Позитив: +44
Последний визит:
Вс, 29 Окт 2023 20:26:24

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

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

Поделиться2Пн, 19 Июл 2021 21:55:33

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

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

Код:

<style>
.wrp {
  width:239px;
  height:239px;
  background:url(//forumupload.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>

Вид:

Поделиться3Пн, 19 Июл 2021 21:59:52

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 97
Уважение: +27
Позитив: +44
Последний визит:
Вс, 29 Окт 2023 20:26:24

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

Поделиться4Пн, 19 Июл 2021 22:02:35

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 15:51:12

мятный чай написал(а):

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

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

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

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

Поделиться5Пн, 19 Июл 2021 22:04:12

Автор: мятный чай
Заслуженный
Зарегистрирован: Пт, 3 Авг 2018
Сообщений: 97
Уважение: +27
Позитив: +44
Последний визит:
Вс, 29 Окт 2023 20:26:24

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

Поделиться6Пн, 19 Июл 2021 23:10:23

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

мятный чай написал(а):

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

Так:
[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Сб, 24 Июл 2021 16:00:05

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

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

Код:

<!-- Смена картинок при наведении с анимацией -->
<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)

Поделиться8Сб, 24 Июл 2021 16:36:02

Автор: kolobdur74
...
Зарегистрирован: Пн, 6 Сен 2010
Сообщений: 7338
Уважение: +5808
Позитив: +6437
Пол: Мужской
Последний визит:
Вс, 14 Апр 2024 13:30:41

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

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

Код:

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

Поделиться1Пн, 19 Июл 2021 20:57:37

Поделиться2Пн, 19 Июл 2021 21:55:33

Поделиться3Пн, 19 Июл 2021 21:59:52

Поделиться4Пн, 19 Июл 2021 22:02:35

Поделиться5Пн, 19 Июл 2021 22:04:12

Поделиться6Пн, 19 Июл 2021 23:10:23

Поделиться7Сб, 24 Июл 2021 16:00:05

Поделиться8Сб, 24 Июл 2021 16:36:02