Pojawiający się div na divie jako informacja

Question

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;
}

 

Answer 1

możesz pokazać zachowanie jakie chcesz uzyskać ?

Comments

Wejdź na np. cdp.pl, najeżdżając na produkt pojawiaja się informacje. No i mi chodzi o to samo, tak jakby div na divie, gdzie 1 div to zdjęcie produktu, a drugi to z informacjami który ma 'opacity 0', po najechaniu 'opacity 1' i pojawia się zamiast obrazka (diva 1). No chyba ze w JS idzie jakoś zrobić zamieniając diva 1 na diva 2, sory z gory za chaotycznie pisanie ale godzina pozna i lekkie zdenerwowanie.

---

http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

---

A nie da rady po prostu poprzez JS zamienić wnętrze z diva z obrazkiem na przygotowanego diva z informacjami dodając do tego jakieś animacje fadeIn i fadeOut?

---

ale to będziesz tracił obrazem przez to.

Answer 2

Trochę późno i nie za bardzo już myślę, nie wiem jak to zadziała w pętli, ale ja bym spróbował coś takiego:
.proinfo:hover .tabela

{

display: block; albo visibility: visible;

}