this is how the blocks look like
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type=text/javascript src="jquery-1.11.0.min.js"></script>
<script type=text/javascript src="avc.js"></script>
<link href="amcstyle.css" rel="stylesheet" />
</head>
<body>
<div class="twocol">
<div class="inside">test0</div>
</div>
<div class="twocol">
<div class="inside1">Test1</div>
</div>
<div class="twocol">
<div class="inside2">Test3</div>
</div>
<div class="twocol">
<div class="inside3">Test4</div>
</div>
<div style="clear:both"></div>
<div class="twocol">
<div class="inside4">Test5</div>
</div>
<div class="twocol">
<div class="inside5">Test6</div>
</div>
<div class="twocol">
<div class="inside6">Test7</div>
</div>
</body>
</html>
css
.twocol {
float: left;
width: 150px;
height: 150px;
position: relative;
padding: 10px;
}
.twocol1 {
width: 100px;
height: 100px;
position: relative;
padding: 10px;
background-color:pink;
}
.inside {
position: absolute;
border: 1px solid #000;
width: 150px;
height: 150px;
background: #eee;
z-index: 900;
}
.inside:hover {
position: absolute;
z-index: 999;
transition: 0.5s ease;
}
script... currently to manage the expansion and size of the div i have written seperate script function for each
$(document).ready(function () {
$('.inside').hover(
function () {
$(this).animate({
height: '320px',
width: '660px'
}, 200);
},
function () {
$(this).animate({
height: '150px',
width: '150px'
}, 200);
});
});
$(document).ready(function () {
$('.inside1').hover(
function () {
$(this).animate({
height: '320px',
width: '500px'
}, 200);
},
function () {
$(this).animate({
height: '150px',
width: '150px',
}, 200);
});
});
$(document).ready(function () {
$('.inside2').hover(
function () {
$(this).animate({
height: '320px',
width: '320px'
}, 200);
},
function () {
$(this).animate({
height: '150px',
width: '150px'
}, 200);
});
});
$(document).ready(function () {
$('.inside3').hover(
function () {
$(this).animate({
height: '320px',
width: '150px'
}, 200);
},
function () {
$(this).animate({
height: '150px',
width: '150px'
}, 200);
});
});
$(document).ready(function () {
$('.inside4').hover(
function () {
$(this).animate({
height: '155px',
width: '500px'
}, 200);
},
function () {
$(this).animate({
height: '150px',
width: '150px'
}, 200);
});
});
$(document).ready(function () {
$('.inside5').hover(
function () {
$(this).animate({
height: '155px',
width: '320px'
}, 200);
},
function () {
$(this).animate({
height: '150px',
width: '150px'
}, 200);
});
});
$(document).ready(function () {
$('.inside6').hover(
function () {
$(this).animate({
height: '150px',
width: '320px'
}, 200);
},
function () {
$(this).animate({
height: '150px',
width: '150px'
}, 200);
});
});
Increase Width
and Height
in animate section add
inside:hover{left:0}
to cover from left side and also remove .twocol {position:relative}
.. let me know this is what you looking for
$(document).ready(function () { $('.inside').hover( function () { $(this).animate({ height: '400px', width: '400px' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px' }, 200); }); }); $(document).ready(function () { $('.inside1').hover( function () { $(this).animate({ height: '500px', width: '900px' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px' }, 200); }); }); $(document).ready(function () { $('.inside2').hover( function () { $(this).animate({ height: '320px', width: '320px' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px' }, 200); }); }); $(document).ready(function () { $('.inside3').hover( function () { $(this).animate({ height: '320px', width: '150px' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px' }, 200); }); }); $(document).ready(function () { $('.inside4').hover( function () { $(this).animate({ height: '155px', width: '500px' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px' }, 200); }); }); $(document).ready(function () { $('.inside5').hover( function () { $(this).animate({ height: '155px', width: '320px' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px' }, 200); }); }); $(document).ready(function () { $('.inside6').hover( function () { $(this).animate({ height: '150px', width: '320px', left:'0' }, 200); }, function () { $(this).animate({ height: '150px', width: '150px', left:'0' }, 200); }); });
.twocol { float: left; width: 150px; height: 150px; padding: 10px; } .twocol1 { width: 100px; height: 100px; padding: 10px; background-color:pink; } .inside { position: absolute; border: 1px solid #000; width: 150px; height: 150px; background: #eee; z-index: 900; } .inside:hover { position: absolute; z-index: 999; transition: 0.5s ease; } .inside1 { position: absolute; border: 1px solid #000; width: 150px; height: 150px; background: #eee; z-index: 900; } .inside1:hover { position: absolute; z-index: 999; transition: 0.5s ease; left:18px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type=text/javascript src="jquery-1.11.0.min.js"></script> <script type=text/javascript src="avc.js"></script> <link href="amcstyle.css" rel="stylesheet" /> </head> <body> <div class="twocol"> <div class="inside">test0</div> </div> <div class="twocol"> <div class="inside1">Test1</div> </div> <div class="twocol"> <div class="inside2">Test3</div> </div> <div class="twocol"> <div class="inside3">Test4</div> </div> <div style="clear:both"></div> <div class="twocol"> <div class="inside4">Test5</div> </div> <div class="twocol"> <div class="inside5">Test6</div> </div> <div class="twocol"> <div class="inside6">Test7</div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.