Skip to content

Instantly share code, notes, and snippets.

@vxhviet

vxhviet/hoverExpand.md

Created February 17, 2019 14:58
Show Gist options
  • Save vxhviet/d7ca4e05df6a772fa6e6ed3ef21e360d to your computer and use it in GitHub Desktop.
Save vxhviet/d7ca4e05df6a772fa6e6ed3ef21e360d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hoverExpand.md

Hover over DIV to expand width

SOURCE

<div id="growContainer">
  <div class="grow" style="background-color:#2A75A9;"></div>
  <div class="grow" style="background-color:#274257;"></div>
  <div class="grow" style="background-color:#644436;"></div>
  <div class="grow" style="background-color:#8F6048;"></div>
</div>
html,body{
	margin: 0 auto;
	height: 100%;
	width: 100%;
}
body {
	background-color: black;
}
#growContainer{
	display: table;
	width:100%;
	height:100%;
}
.grow{
	display: table-cell;
	height:100%;
	width: 25%;
	-webkit-transition:width 500ms;
	-moz-transition:width 500ms;
	transition:width 500ms;
}
#growContainer:hover .grow{
	width:20%;
}
#growContainer:hover .grow:hover {
	width:40%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment