How to use CSS Scale Transformation In CSS
In this approach, we are using CSS Scale Transformation to expand the sidebar on hover. Initially, the sidebar displays only icons, but on hover, it expands to show both icons and text for each menu item.
Example: The below example uses CSS Scale Transformation to expand the sidebar on hover in CSS.
<!DOCTYPE html>
<html>
<head>
<title>Using CSS Scale Transformation</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
h1 {
color: green;
}
h3 {
margin-bottom: 20px;
}
.sBar {
position: fixed;
right: 0;
top: 0;
height: 100%;
width: 130px;
background-color: rgb(255, 116, 116);
overflow: hidden;
transition: transform 0.3s ease, width 0.3s ease;
}
.sBar:hover {
transform: scale(1);
width: 300px;
}
.sBar ul {
list-style-type: none;
padding: 0;
margin: 0;
transform: scale(2);
}
.sBar ul li {
padding: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.sBar ul li:hover {
background-color: rgb(195, 255, 0);
}
.sBar ul li a {
color: rgb(0, 0, 0);
text-decoration: none;
display: none;
}
.sBar:hover ul li a {
display: block;
}
.icon {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
<h3>Using CSS Scale Transformation</h3>
<div class="sBar">
<ul>
<li>
<i class="fas fa-home icon"></i>
<a href="#">Home</a>
</li>
<li>
<i class="fas fa-info icon"></i>
<a href="#">About</a>
</li>
<li>
<i class="fas fa-tools icon"></i>
<a href="#">Services</a>
</li>
<li>
<i class="fas fa-envelope icon"></i>
<a href="#">Contact</a>
</li>
</ul>
</div>
</body>
</html>
Output:
How to Expand Sidebar on Hover in CSS ?
Sidebar is the navigational element of the application, through which the user can navigate and explore the entire scope of the application. We can add the functionality of expanding the sidebar on hover in CSS using various approaches.
Below are the approaches to expand the sidebar on hover in CSS:
Table of Content
- Using CSS Transition
- Using CSS Scale Transformation
Contact Us