带有标题css的图像变焦不起作用

Question

您好我正在使用以下代码创建图像缩放效果，鼠标悬停时显示标题，由于某种原因，它无法正常工作

    <!-- start thumbnailWrapper div -->
<div class="thumbnailWrapper centered">
<!-- start unordered list -->
<ul>
    <li>
    <a href="../13.aspx"><img alt="" src="product-th05.jpg" /></a>
    <div class="caption">
    <p class="captionInside">Roof Cladding</p>
    </div>
    </li>
    <li>
    <a href="../14.aspx"><img alt="" src="product-th06.jpg" /></a>
    <div class="caption">
    <p class="captionInside">Wall Cladding</p>
    </div>
    </li>
    <li>
    <a href="../15.aspx"><img alt="" src="/portals/0/images/3.jpg" /></a>
    <div class="caption">
    <p class="captionInside">Lining Panels</p>
    </div>
    </li>
    <li>
    <a href="../16.aspx"><img alt="" src="/portals/0/images/4.jpg" /></a>
    <div class="caption">
    <p class="captionInside">Roof Decking</p>
    </div>
    </li>

    <li>
    <a href="../24.aspx"><img alt="" src="/portals/0/images/12.jpg" /></a>
    <div class="caption">
    <p class="captionInside">Coatings &amp; Colour Chart</p>
    </div>
    </li>
</ul>
</div>

和我用来创建效果的css代码

<style>

/* wrapper */
.thumbnailWrapper {
    width: 960px;
    margin: 0px auto;
    text-align: center
} /* not important */
.thumbnailWrapper ul {
    list-style-type: none; /* remove the default style for list items (the circles) */
    margin: 0px; /* remove default margin */
    padding: 0px; /* remove default padding */
}
.thumbnailWrapper ul li {
    float: left; /* important: left float */
    position: relative; /* so we can use top and left positioning */
    overflow: hidden; /* hide the content outside the boundaries (ZOOM) */

    padding: 8px;
    margin: 10px 10px 10px 10px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: 1px 1px 3px 4px #ccc;
    -webkit-box-shadow: 1px 1px 3px 4px #ccc;
    box-shadow: 1px 1px 3px 4px #ccc;
}


.thumbnailWrapper ul li a img {
    width: 200px; /* not important, the pics we use here are too big */
    position: relative; /* so we can use top and left positioning */
        border: 2px solid #333;
}
.caption {
    position: absolute; /* needed for positioning */
    bottom: 0px; /* bottom of the list item (container) */
    left: 0px; /* start from left of the list item (container) */
    width: 100%; /* stretch to the whole width of container */
    display: none; /* hide by default */
    /* styling bellow */
    background: #009B7B;
    color:#fff;
    opacity: 0.9;
    font-weight:800;
}
.caption .captionInside {
    /* just styling */
    padding: 10px;
    margin: 0px;
}
.clear {
    clear: both;
} /* to clear the float after the last item */</style>

我认为它可能只是在玩，但它不想在任何浏览器中工作任何帮助赞赏