CODEWITHSUNDEEP
css
Bowser Boss
Bowser Boss

Reputation: 53

How to get text to appear cleanly after widening div through transition in CSS?

Here you can see my issue. I assume it has to do with the block and inline-block. I want to cleanly make the text appear when hovering over the area. Preferably all in CSS. If anyone can point me in the right direction, that'd be amazing. Thank you!

HTML 
<div class="contact-icon icongrow" id="github">
  <span class="fa fa-github icon"></span>
  <span class="contact-icon-text">@username</span>
</div>
CSS 
#github {
  border-radius: 15px 10px;
  padding: 8px 5px 5px 8px;
  background: #000000;
  color: #FFFFFF;
}

.icon {
  float:none;
}

.icongrow {
  font-size:24px;
  width: 24px;
  transition:width 1s;
  display: block;
}

.icongrow:hover {
  font-size: 28px;
  width: 300px;
}

.icongrow:hover .contact-icon-text {
  display: inline-block;
}

.contact-icon-text {
  display: none;
}

https://jsfiddle.net/sfpfka64/

Upvotes: 1

Views: 143

Answers (3)

KAD
KAD

Reputation: 11102

Add white-space: nowrap to .icongrow 

.icongrow {
  font-size:24px;
  width: 24px;
  transition:width 1s;
  display: block;
  white-space: nowrap;

}

and add an opacity transition to contact-icon-text : 

.icongrow:hover .contact-icon-text {
  opacity: 1;
}

.contact-icon-text {
  opacity: 0;
  display:inline-block;
  transition: all 0.5s;
}

Also make the font-size on hover same as the initial font-size to provide more smoothness : 

.icongrow:hover {
      font-size: 24px;
      width: 300px;
    }

Snippet 

#github {
	border-radius: 15px 10px;
	padding: 8px 5px 5px 8px;
  background: #000000;
	color: #FFFFFF;
}

.icon {
	float:none;
}

.icongrow {
  font-size:24px;
  width: 24px;
  transition:width 1s;
  display: block;
  white-space: nowrap;

}

.icongrow:hover {
  font-size: 24px;
  width: 300px;
}

.icongrow:hover .contact-icon-text {
  opacity: 1;
}

.contact-icon-text {
  opacity: 0;
  display:inline-block;
  transition: all 0.5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="contact-icon-container">
	<div class="contact-icon icongrow" id="github">
		<span class="fa fa-github icon"></span>
		<span class="contact-icon-text">@username</span>
	</div>
</div>

Upvotes: 2

ThaoD5
ThaoD5

Reputation: 183

An easy way would be to put your "contact-icon-text" as a position absolute, so that he would always be placed at the right place.

Demo

.contact-icon-container{
  position:relative;
}

.contact-icon-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
opacity: 0;
}

.icongrow:hover .contact-icon-text {
  opacity: 1;
  transition: .3s ease-in;

You can add transition-delay in order to make your text appear a bit later, but you get the way I would do it :)

Upvotes: 1

JCOC611
JCOC611

Reputation: 19709

Just add the following rules to the .icongrow

 white-space: nowrap;
 overflow: hidden;

Working fiddle: https://jsfiddle.net/yvqga0ja/

Upvotes: 1

Related Questions