***
Нужные
Сообщений 1 страница 3 из 3
Поделиться306-01-2026 19:01:31
[html]
<div class="hover-swap">
<div class="hover-swap__media">
<img class="img img--base" src="https://upforme.ru/uploads/001c/0a/76/4/613957.jpg">
<img class="img img--hover" src="https://upforme.ru/uploads/001c/0a/76/4/729374.jpg">
</div>
<div class="hover-swap__caption" aria-hidden="true">
<p>С Новым годом и Рождеством, Ривер.</p>
<p>
Пусть этот год будет к тебе чуть мягче, чем предыдущий: дел — меньше, сна — больше,
а поводов держать челюсти сжатыми — как можно реже. Пусть интуиция ведёт туда,
куда нужно, а не туда, куда безопасно, и рядом остаются те, ради кого вообще стоит держаться.
</p>
<p>
И пусть мир в новом году иногда по привычке недооценивает тебя — так ему проще.
Мы-то знаем, что твоя сила измеряется не сантиметрами роста, а тем, какая тень остаётся за спиной.
</p>
<p>
А подарки ты уже можешь найти в своей карточке:
</p>
<div class="hover-swap__gifts">
<div class="hover-swap__gift">
<div class="hover-swap__gift-title">Иконка:</div>
<img class="hover-swap__gift-img" src="https://upforme.ru/uploads/001c/82/f2/4/867040.png">
</div>
<div class="hover-swap__gift">
<div class="hover-swap__gift-title">Плашка:</div>
<img class="hover-swap__gift-img" src="https://upforme.ru/uploads/001c/82/f2/4/542544.png">
</div>
</div>
</div>
</div>
<style>
.hover-swap {
width: 300px;
display: inline-block;
line-height: 0;
}
.hover-swap__media {
position: relative;
}
.hover-swap .img {
display: block;
width: 100%;
height: auto;
}
.hover-swap .img--hover {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .25s ease;
}
.hover-swap__caption {
line-height: 1.4;
margin-top: 12px;
opacity: 0;
transform: translateY(12px);
filter: blur(4px);
transition:
opacity .45s ease,
transform .45s ease,
filter .45s ease;
transition-delay: .35s;
}
.hover-swap__caption p {
margin: 0 0 8px 0;
}
.hover-swap__caption p:last-child {
margin-bottom: 0;
}
.hover-swap__gifts {
margin-top: 10px;
line-height: 1.4;
text-align: center;
}
.hover-swap__gift {
display: block;
margin: 12px 0 0 0;
}
.hover-swap__gift:first-child {
margin-top: 0;
}
.hover-swap__gift-title {
font-weight: 700;
margin-bottom: 6px;
}
.hover-swap__gift-img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.hover-swap:hover .img--hover {
opacity: 1;
}
.hover-swap:hover .hover-swap__caption {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
</style>
[/html]



