[Resolved] hover effect for menu items and an image file

[Torsten]

Hi,
I’m trying to move the menu elements “News”, “Karriere”, “Kontakt” (top right / dark background) on hover 4px down, as I managed in the UberMenu below the header with the following:

.ubermenu .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target > .ubermenu-target-text{
    transition:transform 350ms ease-in-out;
}
.ubermenu .ubermenu-item.ubermenu-item-level-0:not(.ubermenu-item-194):hover > .ubermenu-target > .ubermenu-target-text{
    transform:translateY(4px);
}

Same effect wanted in “Team” below the portraits, the white arrow in yellow square.
That element should be always a few Pixel lower (the bottom of the arrow should align with the bottom of the text) and move down on hover another 4px.
thanks in advance,
best,
Torsten

[Tom]

Hi there,

Try this CSS:

.main-navigation .main-nav > ul > li {
    transition: transform 350ms ease-in-out;
}

.main-navigation .main-nav > ul > li:hover {
    transform: translateY(4px);
}

For the arrows, you’ll want to put them inside some HTML like this:

<div class="arrow-container">
    <span class="arrow-text">Your text</span>
    <span class="arrow-image">Your image</span>
</div>

Then add this CSS:

.arrow-container {
    display: flex;
    align-items: center;
}

[Author]

Posts