Dhruv Chadha Dhruv Chadha - 6 months ago 25
CSS Question

Display text as background width increases?

I want the text in the blue box to appear on its opening, but it should be fixed, not adjusting to the blue box width.
I also need some ideas as to what can be other interesting ways to display the text in a similar manner that I just did. (ie not visible initially but on hovering, text visible)



body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about {
top: 10%;
}

#about_button:hover + #about_text {
width: 400px;
}

<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
</div>
</div>
</body>
</html>




Answer

you can just use transform with scale or translate:

scale:

body {
	margin: 0;
	width: 100%;
}
p {
	padding: 0 10px;
}
#page1 {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #77d47f;
}
#about {
	position: absolute;
	left: 5%;
	width: 504px;
	height: 100px;
  overflow:hidden;
}
#about_button {
	width: 100px;
	height: 100px;
	background-color: green;
	display: inline-block;
}
#about_text {
	transition: transform 0.5s;
	height: 100px;	
  width:400px;
	background-color: blue;
	display: inline-block;
  transform-origin:0 0;
	transform: translateX(-4px) scale(0,1);
	overflow: hidden;
}
#about {
	top: 10%;
}

#about_button:hover + #about_text {
	
	transform: translateX(4px) scale(1,1);
}
<html>
    <head>
	    <link rel="stylesheet" href="design.css">
	</head>
	<body>
		<div id="page1">
			<div id="about">
			    <div id="about_button"></div>
				<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
			</div>
		</div>
	</body>
</html>

translate:

body {
	margin: 0;
	width: 100%;
}
p {
	padding: 0 10px;
}
#page1 {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #77d47f;
}
#about {
	position: absolute;
	left: 5%;
	width: 504px;
	height: 100px;
  overflow:hidden;
}
#about_button {
	width: 100px;
	height: 100px;
	background-color: green;
	display: inline-block;
  position:relative;
  z-index:1;
}
#about_text {
	transition: transform 0.5s;
	height: 100px;	
  width:400px;
	background-color: blue;
	display: inline-block;
  transform-origin:0 0;
	transform: translateX(-450px);
	overflow: hidden;
}
#about {
	top: 10%;
}

#about_button:hover + #about_text {
	
	transform: translateX(-4px);
}
<html>
    <head>
	    <link rel="stylesheet" href="design.css">
	</head>
	<body>
		<div id="page1">
			<div id="about">
			    <div id="about_button"></div>
				<div id="about_text"><p>Hi, I am a Computer Science student. I am interested in designing</p></div>
			</div>
		</div>
	</body>
</html>