<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>