Witam. Mógłby mi ktoś objaśnić na jakiej zasadzie działa taki bajer, że np. na stronie jakiegoś sklepu najedziemy na produkt to obrazek produktu zmienia się w dajmy na to tabele z informacjami.
Mam pętle z wypisaniem produktów z mysql w postaci tabel, ale wstawiając do tego diva z position:absolute (na poczatku ma nałożone opacity 0 aby potem po najechaniu ustawić 1) te divy się stackują, nakładają na siebie zamiast jeden obok drugiego jak generowane tabele, Z góry przepraszam za chaos ale męczę się z tym i już ledwo trzymie.
pętla robi tabele:
<table class="tabela" border="2" cellspacing="0" >
<tr>
<td><div id="iproduct"><img src="$img" width="180px" height="280px"/></div>
</td>
</tr>
<tr class="nazwa_produktu">
<td>$name</td>
</tr>
</tr>
<tr class="nazwa_produktu">
<td>$cena zł</td>
</tr>
<div class="proinfo"></div>
</table>
CSS tego diva i tabeli:
.tabela{
margin:15px;
width:200px;
height:300px;
float:left;
text-align:center;
background-image:url("news.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment:fixed;
}
.proinfo{
width:200px;
height:300px;
float:left;
position:absolute;
text-align:center;
background-color: red;
}