In this article, we will see how to create the Carousel column expansion animation on a hover using CSS. Carousel Column expansion animation is a kind of reveal animation in the modern web design paradigm. To accomplish this task, we will create 3 columns of specific width and height, and on mouse hover, the animation is as such that the column on which the mouse pointer points will expand and the content is revealed. The text content is initially downward facing, which is rotated 90 degrees to the left, on mouse hover, the text content will be rotated to the normal 0-degree angle.
Approach:
- Create the class container with the class name card.
- Add the child elements, <p> & <span> for creating three-column elements, with text inside it.
- In order to style the card, we have used the border-radius property & display property as flex for changing the shape, shrink-expand, gap, and padding.
- Now, we will use the transition property for the inner elements, which specifies the CSS properties to which a transition effect should be applied, along with implementing an overflow property that controls the big content & tells whether to clip content or to add scroll bars.
- By styling the <p> element inside the card with the hover state, increases the flex size for the expansion of the column.
- For text rotation, we will use the transform property that specifies changing the coordinate space of the visual formatting model. Here, the transform property will rotate the text to 90 degrees anticlockwise direction. On hovering, we will make the transform rotate to 0 degrees. In other words, including the hover state style will add the transform rotation to negative 90 degrees and transition duration to a half second.
Example: This example describes the creation of the Carousel column expansion animation on hover using CSS.
<!DOCTYPE html> <html>
<head>
<title>
Design a Carousel Column Expansion
Animation effect on Hover using CSS
</title>
<style>
* {
padding: 0;
margin: 0;
}
.card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 210px;
height: 254px;
border-radius: 4px;
background: #7FB77E;
display: flex;
gap: 5px;
padding: .4em;
}
.card p {
height: 100%%;
flex: 1;
overflow: hidden;
cursor: pointer;
border-radius: 2px;
transition: all .5s;
background: #7FB77E;
border: 2px solid #42032C;
display: flex;
justify-content: center;
align-items: center;
}
.card p:hover {
flex: 4;
}
.card p span {
min-width: 14em;
padding: .5em;
text-align: center;
transform: rotate(-90deg);
transition: all .5s;
text-transform: uppercase;
color: #42032C;
letter-spacing: .1em;
}
.card p:hover span {
transform: rotate(0);
}
</style>
</head>
<body>
<div class="card">
<p>
<span>GEEKS</span>
</p>
<p>
<span>For</span>
</p>
<p>
<span>GEEKS</span>
</p>
</div>
</body>
</html>
|
Output:
GeeksforGeeks carousel columns animation