Hi makenzi.exc,
Use jQuery animate function and set the width and height property.
On mouseenter event handler set the width and height and mouseleave event handler reset the width and 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
