To transition
both width
and height
you must change the transition setting like below:
p {width: 100px; height: 200px; transition: all 3s;}
Your code was also missing a :
in the height
property setting within p:hover
.
p:hover {
width: 300px;
height: 500px; /* added missing : */
}
p {
display: block;
border: 1px solid black;
}
p {
width: 100px;
height: 200px;
transition: all 3s;
}
p:hover {
width: 300px;
height: 500px; /* added missing : */
}
<p>abcd</p>
As mentioned in godfrzero's answer, if you want to transition only height
and width
(but not any other property's value change) don't use the all
method.