不太明白你要的效果

每个图片两个DIV。 一个div只有图片， 一个div是图片和文字加背景，

第二个DIV默认隐藏。

鼠标经过第一个DIV,隐藏本身，显示第二个DIV。

鼠标离开第二个DIV,隐藏本身,显示第一个DIV

用一DIV 里面放图片，鼠标经过时把这个DIV宽度和背景加上，移开时恢复原样。

.greater { margin: 15px 5px 5px 15px; }

.sub-greater a { width: 40px; height: 40px; display: block; float: left; position: relative; margin: 0 8px 8px 0; }

.sub-greater .pic { position: absolute; top: 0; left: 0; z-index: 100; width: 30px; height: 30px; display: block; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; }

.sub-greater .pic img { width: 46px; height: 47px; }

.sub-greater .name { position: absolute; color: #333; display: block; overflow: hidden; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; text-align: center; }

.sub-greater a:hover .name { top: -18px; left: -38px; z-index: 101; padding: 4px 6px; height: 20px; line-height: 20px; overflow: hidden; background-color: #fff; border-radius: 2px; box-shadow: 0 0 3px #000; min-width: 90px; opacity: .8; }

#imagephonewell { width: 964px; height: 210px; clear: both; margin: 55px auto 0 auto; background-repeat: no-repeat; text-align: left; background-color: #FFFFFF; }

#imagewell { width: 964px; height: 29px; clear: both; background-color: #FFFFFF; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #CCCCCC;  }

#phonewell { width: 699px; height: 175px; display: inline; float: left; background-repeat: no-repeat; text-align: left;}

#uselogin { width: 265px; height: 173px; display: inline; float: left; background-image: url('../xmimage/reg_bg.jpg'); background-repeat: no-repeat; text-align: left;   padding-top:3px; }

#usname { width: 208px; height: 28px; margin-left: 36px; margin-top: 46px; display: inline-block; background-repeat: no-repeat; text-align: left; }

#uspassword { width: 208px; height: 26px; margin-left: 36px; margin-top: 0px; display: inline-block; background-repeat: no-repeat; text-align: left; }

#loginbutton { width: 208px; margin-left: 16px; display: inline-block; background-repeat: no-repeat; text-align: right; }

程序里： <div id="phonewell">
                <div class="greater" style="margin-left: 5px">
                    <div class="sub-greater">
                        <asp:Repeater ID="Repeater3" runat="server">
                            <ItemTemplate>
                                <a target="_blank" href="<%#Eval("wjtext") %>"><span class="pic">
                                    <img src="<%#Eval("zpimage") %>"></span><span class="name"><%#Eval("zpname")%></span></a>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
            </div>