Scale on hover

[zero_to_one]

Hey there,
I’d like to add a little hover effect to my button as seen here

Screenshot

The only hurdle is, that I don’t want to target the button. It should be some kind of element that just scales behind the button, when I hover it.
I tried this css.

.scale{
height:64px;
width:64px;
transition: all 0.3s ease;
border-radius:50%;
z-index:-2;
transform-origin: 75% 25%;
}
:hover .scale {transform: scale(10);
}

thanks for your help!

[ruenel]

Hello @zerotoone.de,

Thanks for writing in!

What you have requested requires custom development To get you started, you should update your code into this instead:

.scale.x-anchor{
    overflow: visible;
}

.scale.x-anchor:before{
    content: "";

    background-color: red;

    height:64px;
    width:64px;
    transition: all 0.3s ease;
    border-radius:50%;
    z-index:0;
    transform-origin: 75% 25%;
    position: absolute;
}

.scale.x-anchor:hover:before{
    transform: scale(1.2);
}

And if you have inserted this code in the “Customize” tab of the button element, you will have to use this:

$el.scale{
    overflow: visible;
}

$el.scale:before{
    content: "";

    background-color: red;

    height:64px;
    width:64px;
    transition: all 0.3s ease;
    border-radius:50%;
    z-index:0;
    transform-origin: 75% 25%;
    position: absolute;
}

$el.scale:hover:before{
    transform: scale(1.2);
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Regards.

[zero_to_one]

aww man thank you! I got it exactly as I wanted!

[matt]

Glad to hear that, @zerotoone.de.