Design a Carousel Column Expansion Animation Effect 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
>
<!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
>