CODEWITHSUNDEEP
htmlcss
Rithwik
Rithwik

Reputation: 1198

CSS: Transition not working on hover

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>

Upvotes: 0

Views: 107

Answers (2)

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 2

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

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.

Upvotes: 0

Related Questions