Afisare poza si informatii cu zoom pe poza

[cadou]

Nu stiu daca titlu e destul de potrivit dar am vazut pe un site asa ceva :
Daca esti cu mouse-ul pe poza apar niste informatii, daca nu ai mouse-ul pe poza apar alte informatii.
Cand nu ai mouse-ul pe poza Apare asa :
- imagine la dimensiunea 150 x 150 si informatiile pe poza asa: jos stanga orasul, si jos dreapta online/offline mess si varsta.
Cand te duci cu mouse-ul pe poza apare asa :
- imaginea la dimensiunea 160 x 160 si informatiile pe poza asa: jos stanga numele si jos dreapta apare online/offline si varsta .

Print aici :

Ma ajuta careva cu asa ceva ?
Am incercat eu ceva sa fac dar nu am reusit. codu e asa :

Cod: Selectaţi tot

<div class="row">
                <div class="list">
                                                            <div class="item">
                                                <div style="width: 150px; margin-left: 0px; margin-top: 100px;" class="small-details">
                            <div class="left" data-location="Iasi" data-username="Aryam">Iasi</div>
                            <div class="right">
                                <div class="stat"><img src="http://opi.yahoo.com/online?u=ispir.marius27&t=0" height="14" width="14"></div>
                                <div class="age male">27</div>
                            </div>
                        </div>
                       <a title="ID-uri de Mess Aryam" href="/aryam.html"><img style="width: 150px; height: 150px; margin-left: 0px; margin-top: 0px; z-index: 0;" data-rollover="/poza-profil/1.jpg" class="profile-pic" src="/poza-profil/3.jpg" alt="ID Mess Aryam"></a>                    </div>                                    		
                </div>
            </div>

Si css asa :

Cod: Selectaţi tot

.fete-baieti .list{min-height:200px;}
.fete-baieti .list h4{padding-top:20px;}
.fete-baieti .list .item{width:150px;height:150px;margin-right:7px;margin-bottom:7px;float:left}
.fete-baieti .list .item .small-details{cursor:pointer;color:#ffffff;width:150px;height:45px;overflow:hidden;vertical-align:baseline;float:left;position:absolute;z-index:103;vertical-align:bottom;margin-top:100px;}
.fete-baieti .list .item .small-details .left{float:left;width:80%;height:18px;font-weight:bold;margin-top:28px;padding-left:5px;overflow:hidden;}
.fete-baieti .list .item .small-details .right{float:right;width:13%;padding-right:5px;overflow:hidden;margin-top:4px;}
.fete-baieti .list .item .small-details .right .stat{padding:3px;width:15px;text-align:center;height:15px;overflow:hidden;}
.fete-baieti .list .item .small-details .right .age{padding:3px;width:15px;font-weight:bold;padding-top:1px;padding-bottom:1px;}
.fete-baieti .list .item .small-details .right .age.female{background:#F975C4 }
.fete-baieti .list .item .small-details .right .age.male{background:#7ABBFF }
.fete-baieti .list .item.last{margin-right:0px;}
.fete-baieti .row.under-pagination{margin-top:-10px;}
.fete-baieti .row.under-pagination .adsense{width:728px;height:90px;margin:0 auto;}


h2.latest-added-id-title{color:#526F0C;font-size:16px;font-weight:bold;}
.eight.columns.home-list-wrapper{width:62%;}
.four.columns.home-ads{width:37.6%;margin:0px;padding:0px;min-height:300px;margin-top:29px;}

.list{min-height:200px;}
.list h4{padding-top:20px;}
.list .item{width:150px;height:150px;margin-right:7px;margin-bottom:7px;float:left}
.list .item .small-details{cursor:pointer;color:#ffffff;width:150px;height:45px;overflow:hidden;vertical-align:baseline;float:left;position:absolute;z-index:103;vertical-align:bottom;margin-top:100px;}
.list .item .small-details .left{float:left;width:80%;height:18px;font-weight:bold;margin-top:28px;padding-left:5px;overflow:hidden;}
.list .item .small-details .right{float:right;width:13%;padding-right:5px;overflow:hidden;margin-top:4px;}
.list .item .small-details .right .stat{padding:3px;width:15px;text-align:center;height:15px;overflow:hidden;}
.list .item .small-details .right .age{padding:3px;width:15px;font-weight:bold;padding-top:1px;padding-bottom:1px;}
.list .item .small-details .right .age.female{background:#F975C4 }
.list .item .small-details .right .age.male{background:#7ABBFF }
.list .item.last{margin-right:0px;}
.row {width: 100%;max-width: 780px;min-width: 527px;margin: 0 auto;}
.row { width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
.row, .clearfix { zoom: 1; }

Va rog ajutor, raman dator cu o bere.

Uite un exemplu din care te poti inspira si sa-i mai adaugi proprietati pentru ce iti trebuie.

Cod: Selectaţi tot

<style type="text/css">
div.test {
 position: relative;
 width:175px;
 height:185px;
 border:1px solid blue;
 text-align:center;
}
div.test .nume, div.test .stare {
 display:none;
}
div.test:hover .nume, div.test:hover .stare {
 display:inline;
}
div.test:hover .oras, div.test:hover .varsta {
 display:none;
}
div.test:hover img {
 width:160px;
 height:160px;
}
</style>

<div class="test">
 <img src="https://marplo.net/imgs/baner.jpg" alt="marplo.net" width="150" height="150" /><br/>
 <span class="oras">Orasul</span> <span class="varsta">33</span>
 <span class="nume">MarPlo</span> <span class="stare">Online</span>
</div>

ms marplo de exemplu :
Dar e o problema mica , informatiile apar sub poza, eu doresc sa apara pe poza jos .
am incercat sa pun in css regula paddint-top: -10px;
Dar degeaba

Foloseste position:absolute; la elementele cu acele informatii, cu top, left, etc. pt. pozitionare.
Gasesti in Cursul CSS de pe site, si pe internet despre aceste proprietati CSS.

Mersi marplo, am rezolvat problema, cu position:absolute;.