Article Categories

Selected Reading

Revealing Hidden Elements by CSS Animations

CSS Web Development Front End Technology

CSS animations allow us to reveal hidden elements with smooth transitions and effects. Elements can be hidden using the opacity: 0 property and revealed through hover interactions, creating engaging user experiences.

Syntax

selector {
    opacity: 0; /* Hide element */
    transition: opacity duration;
}

selector:hover {
    opacity: 1; /* Reveal element */
    animation: keyframe-name duration timing-function;
}

@keyframes keyframe-name {
    0% { /* starting state */ }
    100% { /* ending state */ }
}

Example: Revealing Hidden Elements on Hover

The following example demonstrates how to reveal a hidden element when hovering over a trigger element −

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        position: relative;
        width: 400px;
        height: 300px;
        margin: 50px;
        perspective: 1000px;
    }
    
    .trigger-circle {
        position: absolute;
        height: 150px;
        width: 150px;
        background-color: firebrick;
        border-radius: 50%;
        left: 50px;
        top: 50px;
        z-index: 2;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
    
    .hidden-element {
        position: absolute;
        height: 120px;
        width: 80px;
        background-color: #880088;
        border-radius: 8px;
        left: 250px;
        top: 100px;
        opacity: 0;
        transition: opacity 0.8s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
    }
    
    .container:hover .hidden-element {
        opacity: 1;
        animation: slideIn 1.2s ease-out;
    }
    
    .container:hover .trigger-circle {
        animation: wobble 1s ease;
    }
    
    @keyframes slideIn {
        0% {
            opacity: 0;
            left: 100px;
            transform: scale(0.5);
        }
        50% {
            opacity: 0.7;
            left: 200px;
            transform: scale(1.1);
        }
        100% {
            opacity: 1;
            left: 250px;
            transform: scale(1);
        }
    }
    
    @keyframes wobble {
        0%, 100% {
            transform: rotate(0deg) scale(1);
        }
        25% {
            transform: rotate3D(-1, 1, 0.1, 8deg) scale(1.05);
        }
        75% {
            transform: rotate3D(1, -1, 0.1, 8deg) scale(1.05);
        }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="trigger-circle">Hover Me</div>
        <div class="hidden-element">Hidden!</div>
    </div>
</body>
</html>

A red circular button labeled "Hover Me" appears on the page. When hovered, a purple rectangular element slides in from the left with a scaling effect while the circle wobbles slightly. The hidden element fades in smoothly during the animation.

Key Properties

Property	Purpose
`opacity: 0`	Hides the element initially
`transition`	Creates smooth opacity changes
`animation`	Applies keyframe-based animations
`@keyframes`	Defines animation steps and transformations

Conclusion

CSS animations provide powerful ways to reveal hidden elements with engaging effects. Combine opacity, transition, and @keyframes to create smooth reveal animations triggered by user interactions like hover.

AmitDiwan

Updated on: 2026-03-15T15:35:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next