Mouse over the small image to display the large image and detailed information_html/css_WEB-ITnose

What I want to achieve now is to display the large image and detailed information when the mouse slides over the small image. I found a piece of code on the Internet
080b747a20f9163200dd0a7d304ba388
.thumbnail {
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 100;
}

.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -600px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width:220px;
height:320px;
}

.thumbnail span img{
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
531ac245ce3e4fe3d50054a55f265927

4a23666a0a14c7a10093c1860beadae1
0fc5c90f257c8bbe709da427d559475b
t;
                                                                                    ;%#Eval("product_img") %>" id="oimg" alt="" width="100px" height="100px" style="border:0" />
;img src="images/e02fd37c820ed1009379ac981c063363" border="0" width="212px" height="212px">df250b2156c434f3390392d09b1c9563Test Test Test
54bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08ed
                                                                     ​🎜> http://img.my.csdn.net/uploads/201304/16/1366081185_5840.jpg

Now I want to add some detailed information under the big picture, such as name, price, etc. Yes, there is a problem
d9effbf658d2a4d84bcf3b0b5212d9b0
7230b301061af9f23d2c5ee521fe9648
                                                                                               >" border="0" width="212px" height="212px">df250b2156c434f3390392d09b1c9563
                             3c6c81924e8a0204d3baacba6781b9a8' Font-Bold="true" Font-Size="14px" ForeColor="#0063DC">ea24c5d4ae976f2f2c2f318934a7a898df250b2156c434f3390392d09b1c9563
￥92ccea75731e8269dc07e7ff126671e5' Font-Size="12px" Font-Bold="true" ForeColor=" #FF6600">ea24c5d4ae976f2f2c2f318934a7a898
                                             8248825988af32b75a11877c744a352b
This won’t work , the effect is as follows
http://img.my.csdn.net/uploads/201304/16/1366081185_6372.jpg

How can I make it display in order line by line? ?

Reply to discussion (solution)

080b747a20f9163200dd0a7d304ba388

.thumbnail{

position: relative;
z -index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 100;
}

.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -600px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
width:220px;
height:320px;
}

.thumbnail span img{
border-width : 0;
padding: 2px;
}
.thumbnail span p{
position:absolute; left:0px; bottom:0px; height:20px; line-height:20px; text-align :center;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
531ac245ce3e4fe3d50054a55f265927
d9effbf658d2a4d84bcf3b0b5212d9b0
🎜>                                                                           class="thumbnail" href="#thumb">
                                                                                ​100px" height="100px" style="border:0" />
                                                                             " width="212px" height="212px">
                                                                                                                                                      🎜>                                                                                                                      Change it yourself. The style can be changed directly. No problem in chrome and firefox.

46d5fe1c7617e3914f214aaf043f4ccf
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 100;
}

.thumbnail span{
position: absolute;
……
我试了一下，可以是可以，但是我在绑定里面在加上一些比如说名称，价格之类的，
61f7e3f05ea9991a9092f90f6a17fbe6
                0fc5c90f257c8bbe709da427d559475b
                    e3ab4b14faaf55b64782361bbf44f7d2
                   d8aa421a1cfb5f33f2a9bcc34104a9e1" id="oimg" alt="" width="100px" height="100px" style="border:0" />
                   45a2772a6b6107b401db3c9b82c049c2d8aa421a1cfb5f33f2a9bcc34104a9e1" border="0" width="212px" height="212px">
                   e388a4556c0f65e1904146cc1a846bee
                   70cd263e14e38d25bd2565bdbcc581df' Font-Bold="true" Font-Size="14px" ForeColor="#0063DC">ea24c5d4ae976f2f2c2f318934a7a898ff9d32c555bb1d9133a29eb4371c1213
                   ￥827e4a0403aa73446e2295cf5c4b91a9' Font-Size="12px" Font-Bold="true" ForeColor="#FF6600">ea24c5d4ae976f2f2c2f318934a7a898
                   94b3e26ee717c64999d7867364b1b4a3
                   54bdf357c58b8a65c66d7c19c8e4d1145db79b134e9f6b82c0b36e0489ee08ed
                247b94fc9b32a7a895c80acdf798d00f
            8248825988af32b75a11877c744a352b
效果就会变成下面这个样：

<style type="text/css">.thumbnail{position: relative;z-index: 0;}.thumbnail:hover{background-color: transparent;z-index: 100;}.thumbnail span{position: absolute;background-color: lightyellow;padding: 5px;left: -600px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;width:220px;height:320px;}.thumbnail span img{border-width: 0;padding: 2px;}.thumbnail span div{position:absolute; left:0px; bottom:0px;}.thumbnail span div p{	clear:both; height:20px; line-height:20px; text-align:center; overflow:hidden;}.thumbnail:hover span{visibility: visible;top: 0;left: 60px;}</style><asp:DataList ID="DataList1" runat="server" RepeatColumns="9" RepeatDirection="Horizontal"                CellSpacing="9">                <ItemTemplate>                    <a class="thumbnail" href="#thumb">                   <img src="images/<%#Eval("product_img") %>" id="oimg" alt="" width="100px" height="100px" style="border:0" />                   <span><img src="images/<%#Eval("product_img") %>" border="0" width="212px" height="212px">                   <div>				   				   <P>标题</P>				   <P>价格</P>				   <P>访问量</P>				   </div>                   </span></a>                </ItemTemplate>            </asp:DataList>

XML/HTML code?12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535446d5fe1c7617e3914f214aaf043f4ccf.thumbnail{position: relative;z-index: 0;} .thumbna……
我试过了，可以，现在还有一个问题，就是说我想让
64e5601d0a941f4972a2954192bdae18标题ee2bfd64228f824cf6027e0da2815b78变成e388a4556c0f65e1904146cc1a846beea8861386decccdb9bf88c0a114fa7f3b标题5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3
64e5601d0a941f4972a2954192bdae18价格ee2bfd64228f824cf6027e0da2815b78
64e5601d0a941f4972a2954192bdae18访问量ee2bfd64228f824cf6027e0da2815b78
上面三个各自加上自己的链接，但我一加上a href，鼠标还没等指上去这个弹出的层就消失了，这个要怎么改啊？麻烦你了，谢谢！

有没有人知道了啊？帮帮忙啊