Hi makenzi.exc,
Use jQuery animate function and set the height property.
On mouseenter event handler set the height and mouseleave event handler reset the height.
Refer below example.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<div id="dvContent" align="center" style="background: #61028D; width: 300px; height:50px; border: 1px solid #61028D">
<div style="width: 300px">
<h3 style="color:white">Welcome to ASPSnippets</h3>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var contentWidth = $("#dvContent").width();
var contentHeight = $("#dvContent").height();
$("#dvContent").mouseenter(function () {
$(this).animate({
width: "500",
height: "80"
});
}).mouseleave(function () {
$(this).animate({
width: contentWidth,
height: contentHeight
});
});
});
</script>
</body>
</html>
Demo
Screenshot
Downloads
Download Sample
