Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 136
  • Last Modified:

Unsmooth CSS transition question

When I hover my mouse over the gray div area, the initial expansion is a very quick jerk. But it slowly decreases in size after a mouseout. My objective is to achieve a smooth transition both ways, i.e., expansion and collapse. Can anyone please tell me what I'm lacking with my code? Thanks.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
div {
	background: rgba(220,216,216,1.00);
	width: 400px;
	height: 295px;
	margin: 0 auto;
	overflow: hidden;
	transition: all 2s ease;
}
div:hover {
	height: 100%;
}
</style>
</head>

<body>
	<div>
    	This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box. This is an expanding div box.  
    </div>
</body>
</html>

Open in new window

0
elepil
Asked:
elepil
1 Solution
 
GaryCommented:
Don't use 100% - use a set height for the hover.
0
 
elepilAuthor Commented:
THANKS!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now