Softedge Docs
v1.13.0 Index

Hover

Composable hover effects. Each class works standalone or via a .hover-group parent, and stacks with the others without conflict. .lift is part of the system.

Stacking

The main point: combine several effects on one element. Transitions add up, transforms compose — nothing gets overwritten.

.lift + .hover-style
Hover me 
<div class="lift shadow hover-style"
     style="--hover-bg: var(--bs-primary); --hover-color: #fff">...</div>

// shadow (lift) AND bg/color (hover-style) animate together
.lift + .hover-scale
Hover me 
<div class="lift shadow hover-scale">...</div>

// lift → translate ; hover-scale → scale : the element lifts AND grows
.lift-lg + .hover-scale + .hover-style
Full stack 
<div class="lift-lg shadow hover-scale hover-style"
     style="--hover-bg: var(--bs-accent); --hover-color: #fff; --hover-scale: 1.06">...</div>

// box-shadow + translate + scale + background-color + color, all at once

Lift

Hover lift with shadow elevation. Combine with .shadow-* for colored shadows.

.lift.lift-lg
.lift
.lift-lg
.shadow-primary
.shadow-accent
.shadow-success
.shadow-danger
<div class="card lift shadow">...</div>
<div class="card lift-lg shadow">...</div>

// colored shadow
<div class="card lift shadow-primary">...</div>

Scale

.hover-scale --hover-scale: 1.1
Hover me
<div class="hover-scale">...</div>

// custom scale
<div class="hover-scale" style="--hover-scale: 1.05">...</div>

Underline

.hover-underline
Hover for underline 
<a class="hover-underline" href="#">Link text</a>

// also activates on .active, .show, :focus-visible

Style

.hover-style --hover-bg · --hover-color
Hover for style
<div class="hover-style" style="--hover-bg: var(--bs-primary); --hover-color: #fff">...</div>

Show

.hover-show --motion-from · --motion-inset
right
Tag
left
Tag
bottom
Tag
// right (default)
<div class="hover-show p-2">...</div>

// left
<div class="hover-show p-2" style="--motion-inset: 0 auto auto 0; --motion-from: translateX(-101%)">...</div>

// bottom fullwidth
<div class="hover-show p-2" style="--motion-inset: auto 0 0 0; --motion-from: translateY(101%)">...</div>

Group

.hover-group
child — hover-style child — hover-underline child — hover-scale 
// the parent hover triggers every child
<div class="hover-group">
  <span class="hover-style">...</span>
  <span class="hover-underline">...</span>
  <span class="hover-scale">...</span>
</div>

How it works & extending

transition and transform are single properties: stacking two effects that declare them outright would let only one value win, the other snapping without animation. Two techniques avoid that:

  • Additive transitions. Each effect sets a segment in a --hover-tr-* variable ending with a comma. A base rule concatenates every var(--hover-tr-*,) and ends with an inert --hover-noop 0s sentinel (a no-op that absorbs the dangling comma when a segment is empty, without animating anything). A missing effect = empty segment = no overhead.
  • Composable transforms. Movements use the individual translate: / scale: properties (not the transform shorthand), which compose natively.
// only the classes that set a segment get the composed transition
.lift, .lift-lg, .hover-scale, .hover-style, .hover-show {
  transition:
    var(--hover-tr-lift,)
    var(--hover-tr-scale,)
    var(--hover-tr-style,)
    var(--hover-tr-show,)
    --hover-noop 0s; // inert sentinel
}

.lift, .lift-lg { --hover-tr-lift: box-shadow 0.25s ease, translate 0.25s ease,; }
.hover-scale    { --hover-tr-scale: scale 0.3s var(--ease-in-out),; }
.hover-style    { --hover-tr-style: background-color 0.3s var(--ease-in-out), color 0.3s var(--ease-in-out),; }

Adding a new effect. Three edits in the base rule: add the class to its selector list, add its segment variable, reference that variable in the transition. Classes that carry no segment (.hover-group, .hover-underline) stay out of the list, so they never override a transition declared elsewhere. Then use an individual transform property:

// 1. add the class to the base rule selector, then its segment
//    .lift, …, .hover-show, .hover-rotate { transition: … var(--hover-tr-rotate,) --hover-noop 0s; }
.hover-rotate       { --hover-tr-rotate: rotate 0.3s var(--ease-in-out),; }
// 2. individual transform on hover
.hover-rotate:hover { rotate: 6deg; }