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>