Pagina 1 din 1

Afisare poza si informatii cu zoom pe poza

Scris: Mie Ian 09, 2013
de 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 :
Imagine
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.

Afisare poza si informatii cu zoom pe poza

Scris: Joi Ian 10, 2013
de MarPlo
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>

Afisare poza si informatii cu zoom pe poza

Scris: Vin Ian 11, 2013
de cadou
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

Afisare poza si informatii cu zoom pe poza

Scris: Sâm Ian 12, 2013
de MarPlo
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.

Re: Afisare poza si informatii cu zoom pe poza

Scris: Mar Ian 15, 2013
de cadou
Mersi marplo, am rezolvat problema, cu position:absolute;.