XF 2.3 Стилизация описания картинки

[REWRITE]

Добрый день, как можно такое реализовать, чтобы при наведение на картинку в тексте отображалось такое описание?

 

[alexmiron1997]

Добрый день, как можно такое реализовать, чтобы при наведение на картинку в тексте отображалось такое описание?

Посмотреть вложение 157741

Самое простое думаю в стилях бесполезно копаться, лучшее решение написать плагин для BB-Кодов чтобы вставлять иконку(возможно с парсингом с дб какой-нибудь) и кастомное описание для этого бб кода при наведении

 

[burenkov]

1. HTML + CSS (вставьте в `extra.less` или через кастомный BB-код)

Спойлер

<div class="image-hover-tooltip">
    <img src="URL_ВАШЕЙ_КАРТИНКИ.jpg" alt="Описание" class="hover-image">
    <div class="tooltip-content">
        <h3 class="tooltip-title">Фиолетовый заголовок</h3>
        <p class="tooltip-text">Текст с жёлтым цветом и красивым свечением!</p>
    </div>
</div>


<style>
.image-hover-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}


.hover-image {
    max-width: 100%;
    border-radius: 5px;
    transition: all 0.3s ease;
}


.image-hover-tooltip:hover .hover-image {
    box-shadow: 0 0 15px #FFD700, 0 0 25px #FFD700;
    border: 2px solid #FFD700;
}


.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #FFD700;
    border-radius: 8px;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}


.image-hover-tooltip:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px);
}


.tooltip-title {
    color: #8A2BE2;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 10px;
}


.tooltip-text {
    color: #FFD700;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}
</style>

2. Как добавить в XenForo?
Вариант 1: Вручную в шаблоне где нужно вывести.

Вариант 2: Создать кастомный BB-код если это в постах

3. Как это выглядит?
При наведении– появляется всплывающее окно с текстом.
Фиолетовый заголовок(`#8A2BE2`).
Жёлтый текст (`#FFD700`).
Свечение рамки при наведении.
Плавная анимация появления.

Можно легко менять цвета, размеры и позиционирование через CSS.
Вот так выглядит , пишу с телефона так как не за ПК с бб кодо нужно дома смотреть.
Вот пример что будет

 

[alexmiron1997]

Добрый день, как можно такое реализовать, чтобы при наведение на картинку в тексте отображалось такое описание?

Посмотреть вложение 157741

Подготовил мини плагин, скоро будет на форуме.

 

[alexmiron1997]

Добрый день, как можно такое реализовать, чтобы при наведение на картинку в тексте отображалось такое описание?

Посмотреть вложение 157741

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[DrunkDoomer]

Зачем колесо изобретаете, если все это можно реализовать через Keyword Linking by Siropu ?