# Text hover Effekt

**URL:** <https://forum.shopware.com/t/text-hover-effekt/106561>\
**Category:** Themes & Design\
**Created:** [22. Februar 2025 um 16:50 UTC](https://forum.shopware.com/t/text-hover-effekt/106561 "2025-02-22T16:50:58Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sascha.buch-schmidt](https://avatars.discourse-cdn.com/v4/letter/s/f17d59/32.png) [@sascha.buch-schmidt](https://forum.shopware.com/u/sascha.buch-schmidt)\
**Post date:** [22. Februar 2025 um 16:50 UTC](https://forum.shopware.com/t/text-hover-effekt/106561/1 "2025-02-22T16:50:58Z")

</div>

Hallo,

ich habe folgendes Theme gekauft und versuche, einen Effekt einzubauen, der auf der Demo-Seite des Themes dargestellt wird.

[https://unikura.tab10.de](https://unikura.tab10.de)

Und zwar diesen Hover-Effekt, wenn man über eine der Parfümflaschen fährt. Hat jemand einen Tipp, wie ich so etwas umsetzen kann?

---

<div class="post-metadata">

**Author:** ![Anotherone](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@Anotherone](https://forum.shopware.com/u/Anotherone)\
**Post date:** [23. Februar 2025 um 15:31 UTC](https://forum.shopware.com/t/text-hover-effekt/106561/2 "2025-02-23T15:31:29Z")

</div>

Hast Du denn den Anbieter mal gefragt? Soweit ersichtlich, ist das im Theme enthalten.

```auto
.unikura-herobox .cms-element-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: none;
    min-width: auto;
    padding: 20px;
    min-height: 30%;
    -moz-transform: translateY(calc(100% - 60px));
    -o-transform: translateY(calc(100% - 60px));
    -ms-transform: translateY(calc(100% - 60px));
    -webkit-transform: translateY(calc(100% - 60px));
    transform: translateY(calc(100% - 60px));
}

```

---

<div class="post-metadata">

**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\
**Post date:** [24. Februar 2025 um 08:16 UTC](https://forum.shopware.com/t/text-hover-effekt/106561/3 "2025-02-24T08:16:01Z")

</div>

> [@sascha.buch-schmidt](#):
>
> Hat jemand einen Tipp, wie ich so etwas umsetzen kann?

Einfach mal Beispiele mit CSS ansehen:

> transform: scale(n);