Be aware that changing the page layout on hover, or showing elements atop the hovered elements, is at best a dire User Interface pattern; it won't work for touch devices, and often creates loops when the hovered element is no longer hovered because the layout changed.
You may have more luck putting the large image in the web app List Item template, hidden by default, then shown beside the item. Perhaps something like this?
HTML snippet, based on the linked page (.df-largeimage
is new):
<div class="deerfootCarpretTest">
<div class="df1">Carpet </div>
<div class="df2"><a href="/carpet_test/carpet-1"><img border="0" alt="" src="/images/test carpet-01.jpg"></a></div>
<div class="df3"> From: 300</div>
<div class="df-largeimage">
<img border="0" alt="" src="/images/test carpet-01.jpg">
</div>
</div>
CSS:
.df-largeimage {
display: none;
left: 230px;
position: absolute;
}
Javascript:
jQuery(".df2").hover(
// mouseenter
function() {
jQuery(this).siblings(".df-largeimage").show()
},
// mouseleave
function() {
jQuery(this).siblings(".df-largeimage").hide()
}
);