Slowly open or close div

Published on : April 27, 2026

Author: wahid

Category: Uncategorized

Today we describe a simple code to open or close div slowly on mouse hover. Suppose we have a div. when we take mouse over on this div another div will be open or close slowly.

Here is our Html code

[sourcecode]
<html>
<head>
<title>Open or close div slowly.</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div><img src="chelsea.jpg" alt="test"></div>
<div class="top">
Chelsea Football Club are an English football club based in Fulham, London. Founded in 1905, the club play in the Premier League and have spent most of their history in the top tier of English football. The club’s home ground is the 41,837-seat Stamford Bridge stadium, where they have played since their establishment.
</div>
</div>
</body>
</html>
[/sourcecode]

Here is our css code:

[sourcecode]
div {
height: 479px;
width: 720px;
}

div > div {
height: 70px;
position: absolute;
}

.top {
background: #008350;
bottom: 0px;
top: 417px;
-webkit-transition: top .5s, bottom .5s, background, .5s;
transition: top .5s, bottom .5s, background, .5s;
}

.top:hover {
background: #008350;
bottom: 0px;
height: 300px;
top: 200px;
}
[/sourcecode]

Lets try it

Output

Mouse over Output