IE7: Image that appears on mouseover is going under surrounding divs (Z-order not working properly)

Question

here is the fix

add jquery library to your source

and add this code

<script>
$(function() {
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
       });
});
</script>

like that

<html>
<head>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
body {
background-color: black;
}

.homelist{ 
margin-top: 10px; 
width: 490px; 
float: left;  
}

.attorneyhomediv
{
width: 226px;
float: left;
background-color: #d2c8c5;
position: relative;
}

.atty1 .bigroll .big-photo1, .atty2 .bigroll .big-photo2, .atty3 .bigroll .big-photo3, .atty4 .bigroll .big-photo4
{
position:absolute;
display:none;
z-index: 10;
}

.atty1 .bigroll:hover .big-photo1, .atty2 .bigroll:hover .big-photo2, .atty3 .bigroll:hover .big-photo3, .atty4 .bigroll:hover .big-photo4
{
width:175px; 
padding:13px 12px 6px 13px; 
display:block !important; 
position:absolute;
top:-10px; 
left:68px; 
color:#000; 
background:#fff; 
z-index: 10;
}

.alignleft {
float: left;
}
</style>
</head>
<body>
<div class="homelist">
<div class="attorneyhomediv atty1" >
<a class="bigroll" href="#">
<img class="alignleft size-full wp-image-110" alt="image01" src="http://pixabay.com/static/uploads/photo/2014/01/10/14/33/hot-air-balloon-241642_150.jpg" width="67" height="67">
<div class="big-photo1" style="z-index:500"><img src="http://pixabay.com/static/uploads/photo/2014/01/10/14/33/hot-air-balloon-241642_150.jpg"></div>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="attorneyhomediv atty2" >
<a class="bigroll" href="#">
<img class="alignleft size-full wp-image-112" alt="image02" src="http://pixabay.com/static/uploads/photo/2014/01/10/14/33/hot-air-balloon-241642_150.jpg" width="67" height="67">
<div class="big-photo2" style="z-index:500"><img src="http://pixabay.com/static/uploads/photo/2014/01/10/14/33/hot-air-balloon-241642_150.jpg"></div>
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.    
</p>
</div>
</div>
<script>
$(function() {
       var zIndexNumber = 1000;
       // Put your target element(s) in the selector below!
       $("div").each(function() {
               $(this).css('zIndex', zIndexNumber);
               zIndexNumber -= 10;
       });
});
</script>

</body>
</html>