How to use CSS Animations In CSS
In this approach, first define keyframes with the @keyframes rule to the panel’s hover state using the animation property, allowing for more complex and customized effects. CSS rules are used for the card’s appearance, including initial height and animation properties for expansion. Hovering over the card initiates an “expand” animation, visually enlarging its height.
Example: Implementation of expanding the panel on hover using CSS Animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Panel Hover Expand -
CSS Animations</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
flex-direction: column;
}
@keyframes expand {
0% {
height: 100px;
}
100% {
height: 250px;
}
}
.card {
width: 300px;
max-width: 90%;
background-color: rgb(128, 83, 226);
border: 2px solid #333;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
transition: box-shadow 0.3s ease;
height: 100px;
animation-duration: 0.3s;
animation-fill-mode: forwards;
color: azure;
font-size: 20px;
}
.card:hover {
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
animation-name: expand;
animation-timing-function: ease;
}
</style>
</head>
<body>
<h2>Expanding Panel on Hover
using CSS Animations
</h2>
<div class="card">
<div class="panel">Hover me to expand</div>
</div>
</body>
</html>
Output:
Output
How to expand panel on hover in CSS ?
Expanding a Hover Panel is a common UI effect where a Panel increases in size or reveals additional content when the user hovers over it with their cursor. This effect is frequently used in web design to provide interactivity and enhance user experience.
These are the following approaches to expand the Panel on hover in CSS:
Table of Content
- Using CSS Transitions
- Using CSS Transform Scale
- Using CSS Animations