CSS：过渡无法在悬停上进行

Question

I have a box containing an image and a username. Initially the width is fixed to save space and on hover I want the division to expand to reveal the full content. I have achieved this but I am not able to add transition to make the animation smooth.

Why is it not working?

 .peer-person { position: relative; z-index: 1000; width: 9.5%; min-width: 66px; margin: 0px 0px 5px 0px; padding: 6px 0px 5px 0px; display: inline-block; border: 2px solid #efefef; border-radius: 5px; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } .hover-container:hover>.peer-person { z-index: 1001; background-color: white; width: auto; } .hover-container { display: inline-block; width: 9.5%; min-width: 66px; } .peer p { margin: 0px; padding: 3px; padding-bottom: 0px; color: grey; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 

 <span class="hover-container"> <span class="peer-person"> <a href="#" role="button" class="peer" aria-expanded="false"> <img src="http://via.placeholder.com/36x36" class="img-circle"> <p>1.LONGUSERNAMELONGLONG</p> </a> </span> </span> <span class="hover-container"> <span class="peer-person"> <a href="#" role="button" class="peer" aria-expanded="false"> <img src="http://via.placeholder.com/36x36" class="img-circle"> <p>2.LONGUSERNAMELONGLONG</p> </a> </span> </span> <span class="hover-container"> <span class="peer-person"> <a href="#" role="button" class="peer" aria-expanded="false"> <img src="http://via.placeholder.com/36x36" class="img-circle"> <p>3.LONGUSERNAMELONGLONG</p> </a> </span> </span> 

Answer 1

The problem is that you change the width from a specific value ( 9.5% ) , to a width with a non specific value ( auto ) . For the transition to work you need to use a specific value on the hover state

So change from width:auto to width:100% . Ok, now it works but it doesn't exactly work as you would like. Change the width of hover-container to auto . So it will inherit the width from it's children. By setting width:9.5% to it's children, it will have the same with. And then , when the children expands, it will expand also.

See snippet below

EDIT : if you have more than one , side-by-side , use max-width:9.5% on hover-container and on hover, add styles to the container as well ( max-width:100% ) . it will expand ( with transition ) but only as much as the width of the text.

 .peer-person { position: relative; z-index: 1000; width: 9.5%; min-width: 66px; margin: 0px 0px 5px 0px; padding: 6px 0px 5px 0px; display: inline-block; border: 2px solid #efefef; border-radius: 5px; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } .hover-container:hover>.peer-person { z-index: 1001; background-color: white; width: 100%; } .hover-container { display: inline-block; max-width: 9.5%; min-width: 66px; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } .hover-container:hover { max-width:100%; } .peer p { margin: 0px; padding: 3px; padding-bottom: 0px; color: grey; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 

 <span class="hover-container"> <span class="peer-person"> <a href="#" role="button" class="peer" aria-expanded="false"> <img src="http://via.placeholder.com/36x36" class="img-circle"> <p>1.LONGUSERNAMELONGLONG</p> </a> </span> </span> <span class="hover-container"> <span class="peer-person"> <a href="#" role="button" class="peer" aria-expanded="false"> <img src="http://via.placeholder.com/36x36" class="img-circle"> <p>2.LONGUSERNAMELONGLONG</p> </a> </span> </span> <span class="hover-container"> <span class="peer-person"> <a href="#" role="button" class="peer" aria-expanded="false"> <img src="http://via.placeholder.com/36x36" class="img-circle"> <p>3.LONGUSERNAMELONGLONG</p> </a> </span> </span> 

Answer 2

You cannot use auto height/width for transition. One of the easiest way to get the result is to set max-width/max-height with exact value to animate it using transition . Check this link for more details and other options to get output.