p11 UI
true-perfect-code
Version: 1.1.69

P11HoverEffect Component

The P11HoverEffect component provides an easy way to apply hover effects to any wrapped content (images, text, buttons, etc.). It supports predefined variants, custom hover classes, inline styles, and integrates seamlessly with Blazor event handling via the HoverStateChanged event.
Note: This component is a wrapper. Place any child content (e.g., images, cards, or buttons) inside the P11HoverEffect and configure the hover style via parameters.

P11HoverEffect Component Example

This example demonstrates how to wrap an element with a hover effect. The event log below shows when the component detects hover state changes.

P11 Hover Effects

Just wrap your content and get instant effects - no custom CSS needed!

Scale Effect

Hover me to scale up!

Shadow Lift

Hover for lifting shadow

Press Down

Hover for press down

Scale + Shadow

Combined scale & shadow

Border Glow

Blue glow border on hover

Quick Tilt right

Tilt effect on hover

Quick Tilt left

Tilt effect on hover

Brightness Pulse

Gets brighter on hover

Border Flash

Solid border flash

Border Flash

Border bottom gradient

Rotate Right

Rotate right effect

Rotate Left

Rotate Left effect

Pulse

Pulse effect

Shake

Shake effect

Swing

Swing effect

Skew

Skew right effect

Skew

Skew left effect

Flip Effect
FRONT
BACK
FRONT
SLIDE-IN FROM BOTTOM
FRONT
SLIDE-IN FROM TOP
FRONT
SLIDE IN FROM THE RIGHT
FRONT
SLIDE IN FROM THE LEFT

Real-World Usage - Just Wrap & Go!

Buttons with Hover Effects
Interactive Cards
Product Card

Lifts on hover

Feature Card

Scale & shadow combo

Premium Card

Glowing border effect

Tilt Card

3D tilt effect

Navigation Items
Home
Products
Services
Contact
Images with Effects
Scale effect
Brightness effect
Tilt effect
Interactive Badges
New
Popular
Featured
Hot

Implementation

<h1 class="mb-4">P11 Hover Effects</h1>
<p class="text-muted mb-5">Just wrap your content and get instant effects - no custom CSS needed!</p>

<div class="row g-4">
    <!-- Scale Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Scale Effect</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <div class="p-4 bg-primary text-white rounded text-center">
                        <p class="mb-0 fw-bold">Hover me to scale up!</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Shadow Lift Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Shadow Lift</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.ShadowLift">
                    <div class="p-4 bg-success text-white rounded text-center">
                        <p class="mb-0 fw-bold">Hover for lifting shadow</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Press Down Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Press Down</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.PressDown">
                    <div class="p-4 bg-success text-white rounded text-center">
                        <p class="mb-0 fw-bold">Hover for press down</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Scale + Shadow Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Scale + Shadow</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.ScaleAndShadow">
                    <div class="p-4 bg-info text-white rounded text-center">
                        <p class="mb-0 fw-bold">Combined scale & shadow</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Border Glow Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Border Glow</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BorderGlow">
                    <div class="p-4 bg-warning text-dark rounded text-center border">
                        <p class="mb-0 fw-bold">Blue glow border on hover</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Quick Tilt Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Quick Tilt right</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.QuickTilt">
                    <div class="p-4 bg-danger text-white rounded text-center">
                        <p class="mb-0 fw-bold">Tilt effect on hover</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Quick Tilt Effect (left) -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Quick Tilt left</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.QuickTiltLeft">
                    <div class="p-4 bg-danger text-white rounded text-center">
                        <p class="mb-0 fw-bold">Tilt effect on hover</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Brightness Pulse Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Brightness Pulse</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BrightnessPulse">
                    <div class="p-4 bg-secondary text-white rounded text-center">
                        <p class="mb-0 fw-bold">Gets brighter on hover</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Border Flash Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Border Flash</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BorderFlash">
                    <div class="p-4 bg-dark text-white rounded text-center border">
                        <p class="mb-0 fw-bold">Solid border flash</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Border Bottom Gradient Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Border Flash</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BorderBottomGradient">
                    <div class="p-4 bg-dark text-white rounded text-center border">
                        <p class="mb-0 fw-bold">Border bottom gradient</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Rotate Right Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Rotate Right</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.RotateRight">
                    <div class="p-4 bg-dark text-white rounded text-center border">
                        <p class="mb-0 fw-bold">Rotate right effect</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Rotate Left Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Rotate Left</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.RotateLeft">
                    <div class="p-4 bg-dark text-white rounded text-center border">
                        <p class="mb-0 fw-bold">Rotate Left effect</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Pulse Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Pulse</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Pulse">
                    <div class="p-4 bg-danger text-white rounded text-center">
                        <p class="mb-0 fw-bold">Pulse effect</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Shake Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Shake</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Shake">
                    <div class="p-4 bg-danger text-white rounded text-center">
                        <p class="mb-0 fw-bold">Shake effect</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Swing Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Swing</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Swing">
                    <div class="p-4 bg-warning text-dark rounded text-center border">
                        <p class="mb-0 fw-bold">Swing effect</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Skew Right Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Skew</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.SkewRight">
                    <div class="p-4 bg-warning text-dark rounded text-center border">
                        <p class="mb-0 fw-bold">Skew right effect</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Skew Left Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Skew</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.SkewLeft">
                    <div class="p-4 bg-warning text-dark rounded text-center border">
                        <p class="mb-0 fw-bold">Skew left effect</p>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Flip Effect -->
    <div class="col-md-6 col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Flip Effect</h5>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Flip">
                    <div class="flip-card" style="height:85px;">
                        <div class="flip-inner">
                            <div class="p11-flip-front bg-primary text-white d-flex align-items-center justify-content-center">
                                FRONT
                            </div>
                            <div class="p11-flip-back bg-success text-white d-flex align-items-center justify-content-center">
                                BACK
                            </div>
                        </div>
                    </div>
                </P11HoverEffect>
            </div>
        </div>
    </div>

    <!-- Slide-in Effect -->
    <!-- Slide-In von unten (Standard) -->
    <div class="col-md-4">
        <P11HoverEffect HoverEffectVariant="HoverEffectVariant.SlideIn">
            <div class="position-relative bg-primary text-white d-flex align-items-center justify-content-center"
                 style="height:140px;">
                <span>FRONT</span>
                <div class="slide-in-content slide-from-bottom">
                    SLIDE-IN FROM BOTTOM
                </div>
            </div>
        </P11HoverEffect>
    </div>

    <!-- Slide-In von oben -->
    <div class="col-md-4">
        <P11HoverEffect HoverEffectVariant="HoverEffectVariant.SlideIn">
            <div class="position-relative bg-primary text-white d-flex align-items-center justify-content-center"
                 style=" height:140px;">
                <span>FRONT</span>
                <div class="slide-in-content slide-from-top">
                    SLIDE-IN FROM TOP
                </div>
            </div>
        </P11HoverEffect>
    </div>

    <!-- Slide-In von rechts -->
    <div class="col-md-4">
        <P11HoverEffect HoverEffectVariant="HoverEffectVariant.SlideIn">
            <div class="position-relative bg-primary text-white d-flex align-items-center justify-content-center"
                 style="height:140px;">
                <span>FRONT</span>
                <div class="slide-in-content slide-from-right">
                    SLIDE IN FROM THE RIGHT
                </div>
            </div>
        </P11HoverEffect>
    </div>

    <!-- Slide-In von links -->
    <div class="col-md-4">
        <P11HoverEffect HoverEffectVariant="HoverEffectVariant.SlideIn">
            <div class="position-relative bg-primary text-white d-flex align-items-center justify-content-center"
                 style="height:140px;">
                <span>FRONT</span>
                <div class="slide-in-content slide-from-left">
                    SLIDE IN FROM THE LEFT
                </div>
            </div>
        </P11HoverEffect>
    </div>

</div>

<!-- Real-World Usage Examples -->
<div class="row mt-5">
    <div class="col-12">
        <h3 class="mb-4">Real-World Usage - Just Wrap & Go!</h3>

        <!-- Interactive Buttons -->
        <div class="mb-4">
            <h5>Buttons with Hover Effects</h5>
            <div class="d-flex gap-3 flex-wrap">
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <button class="btn btn-primary px-4">Scale Button</button>
                </P11HoverEffect>

                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.ShadowLift">
                    <button class="btn btn-success px-4">Shadow Button</button>
                </P11HoverEffect>

                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BorderGlow">
                    <button class="btn btn-outline-warning px-4">Glow Button</button>
                </P11HoverEffect>

                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.QuickTilt">
                    <button class="btn btn-danger px-4">Tilt Button</button>
                </P11HoverEffect>

                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BrightnessPulse">
                    <button class="btn btn-info px-4">Brightness Button</button>
                </P11HoverEffect>

                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BorderFlash">
                    <button class="btn btn-outline-dark px-4">Flash Border</button>
                </P11HoverEffect>
            </div>
        </div>

        <!-- Cards with Hover Effects -->
        <div class="mb-4">
            <h5>Interactive Cards</h5>
            <div class="row g-3">
                <div class="col-md-4">
                    <P11HoverEffect HoverEffectVariant="HoverEffectVariant.ShadowLift">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h5 class="card-title">Product Card</h5>
                                <p class="card-text">Lifts on hover</p>
                                <button class="btn btn-sm btn-outline-primary">View Details</button>
                            </div>
                        </div>
                    </P11HoverEffect>
                </div>

                <div class="col-md-4">
                    <P11HoverEffect HoverEffectVariant="HoverEffectVariant.ScaleAndShadow">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h5 class="card-title">Feature Card</h5>
                                <p class="card-text">Scale & shadow combo</p>
                                <button class="btn btn-sm btn-outline-success">Learn More</button>
                            </div>
                        </div>
                    </P11HoverEffect>
                </div>

                <div class="col-md-4">
                    <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BorderGlow">
                        <div class="card h-100 border">
                            <div class="card-body text-center">
                                <h5 class="card-title">Premium Card</h5>
                                <p class="card-text">Glowing border effect</p>
                                <button class="btn btn-sm btn-outline-warning">Get Started</button>
                            </div>
                        </div>
                    </P11HoverEffect>
                </div>

                <div class="col-md-4">
                    <P11HoverEffect HoverEffectVariant="HoverEffectVariant.QuickTilt">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h5 class="card-title">Tilt Card</h5>
                                <p class="card-text">3D tilt effect</p>
                            </div>
                        </div>
                    </P11HoverEffect>
                </div>
            </div>
        </div>

        <!-- Navigation Items -->
        <div class="mb-4">
            <h5>Navigation Items</h5>
            <div class="d-flex gap-2 flex-wrap">
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <a href="#" class="btn btn-outline-secondary">Home</a>
                </P11HoverEffect>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <a href="#" class="btn btn-outline-secondary">Products</a>
                </P11HoverEffect>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <a href="#" class="btn btn-outline-secondary">Services</a>
                </P11HoverEffect>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <a href="#" class="btn btn-outline-secondary">Contact</a>
                </P11HoverEffect>
            </div>
        </div>

        <!-- Images -->
        <div class="mb-4">
            <h5>Images with Effects</h5>
            <div class="d-flex gap-3 flex-wrap">
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <img src="https://picsum.photos/150/150?random=1"
                         class="img-thumbnail"
                         alt="Scale effect" />
                </P11HoverEffect>

                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BrightnessPulse">
                    <img src="https://picsum.photos/150/150?random=2"
                         class="img-thumbnail"
                         alt="Brightness effect" />
                </P11HoverEffect>

                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.QuickTilt">
                    <img src="https://picsum.photos/150/150?random=3"
                         class="img-thumbnail"
                         alt="Tilt effect" />
                </P11HoverEffect>
            </div>
        </div>

        <!-- Badges & Tags -->
        <div class="mb-4">
            <h5>Interactive Badges</h5>
            <div class="d-flex gap-2 flex-wrap">
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.Scale">
                    <span class="badge bg-primary p-2">New</span>
                </P11HoverEffect>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BorderGlow">
                    <span class="badge bg-success p-2 border">Popular</span>
                </P11HoverEffect>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.ShadowLift">
                    <span class="badge bg-warning text-dark p-2">Featured</span>
                </P11HoverEffect>
                <P11HoverEffect HoverEffectVariant="HoverEffectVariant.BrightnessPulse">
                    <span class="badge bg-danger p-2">Hot</span>
                </P11HoverEffect>
            </div>
        </div>
    </div>
</div>
// No specific C# code required for this example (component controlled directly in Razor markup).

Component API

Parameter Type Default Description
ChildContent RenderFragment? null Defines the wrapped content to which the hover effect will be applied.
HoverEffectVariant HoverEffectVariant HoverEffectVariant.None Specifies one of the predefined hover effect variants (e.g., Fade, Scale).
CssClass string? null Custom CSS classes applied to the wrapper at all times.
CustomHoverClass string? null Optional custom CSS class that will be applied on hover/focus.
CustomHoverStyle string? null Optional inline CSS styles applied on hover/focus.
TransitionStyle string? null Custom transition style for smooth animations. Most transitions should be defined in CSS.
HoverStateChanged EventCallback<bool> - Triggered when the hover state changes. The callback receives true when hovered and false when not.
AdditionalAttributes Dictionary<string, object>? null Captures unmatched attributes (id, data-*, aria-*, style, class, etc.).

Available Hover Effects

Effect Description
None No visual effect is applied on hover.
Scale Slightly scales up the wrapped element (e.g., transform: scale(1.03)).
ShadowLift Increases the box shadow to a large size, creating a "lifting" effect.
ScaleAndShadow Combines the scaling and shadow lifting for a classic interactive effect.
BorderGlow Adds a subtle colored border glow.
QuickTilt Applies a quick, slight rotation on the Y-axis.
BrightnessPulse Increases the brightness of the element, often used for images.
BorderFlash Adds a noticeable, solid border flash.
PressDown Simulates a button being pressed down (slight shrink + darker shadow).
QuickTiltLeft Applies a quick, slight rotation on the Y-axis (left).
BorderBottomGradient Applies a border bottom slide (gradient).
Flip Applies a flip effect to element.
RotateRight Rotate element to right.
RotateLeft Rotate element to left.
Pulse Creates a rhythmic pulsing animation by smoothly scaling the element up and down, drawing attention to interactive elements.
Shake Applies a rapid horizontal shaking motion, ideal for error states or to grab user attention.
Swing Creates a pendulum-like swinging motion by rotating the element back and forth from its top anchor point.
SkewRight Applies a skew transformation tilting the element to the right, creating a dynamic slanted appearance.
SkewLeft Applies a skew transformation tilting the element to the left, creating a dynamic slanted appearance.
SlideIn Creates a smooth sliding animation revealing hidden content on hover. To use this effect, add a child element with the class slide-in-content combined with one of the directional classes: slide-from-bottom, slide-from-top, slide-from-right, or slide-from-left. The parent element should have position-relative applied.
An unhandled error has occurred. Reload 🗙